:root {
  --blue:#745b99; --accent:#745b99; --accent-deep:#63487f; --ink:#4a3c5b;
  --muted:#78657f; --line:#bcaecb45; --pale:#f0eafa; --peach:#ffe8dc;
  --radius:28px; --glass:#fffaf3c4;
  font-family:"Itim",sans-serif; color:var(--ink); background:#e6dff3; font-synthesis:weight;
}
* { box-sizing:border-box; }
html { min-height:100%; scroll-behavior:smooth; }
body { margin:0; min-width:300px; min-height:100vh; min-height:100dvh; }
button,input,select,textarea { font:inherit; }
button,a,input,select,summary,[tabindex] { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; transition:background .2s,box-shadow .2s,border-color .2s,transform .2s; }
button:disabled { opacity:.5; cursor:default; }
button:active:not(:disabled) { transform:translateY(1px); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid #9275bf; outline-offset:4px; }
a { color:inherit; text-decoration:none; }
svg { width:20px; height:20px; vertical-align:middle; flex:none; }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; flex:none; }
[hidden] { display:none!important; }
h1,h2,p { margin:0; }
h1,h2 { font-weight:400; }
em { font-style:normal; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* A slow drift keeps the painted sky alive without distracting from the file. */
.sky-backdrop { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(165deg,#e6def5 0%,#dce7fc 43%,#ffe6d7 100%); }
.sky-layer { position:absolute; inset:-4%; background:url("art/pastel-cloud-sky.webp") center 53%/cover no-repeat; animation:sky-drift 90s ease-in-out infinite alternate; will-change:transform; }
.sky-glow { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 35%,#fff7f94d,transparent 65%),linear-gradient(180deg,#f5edf526 0%,transparent 60%,#ffeddb22 100%); }
.sky-halftone { position:absolute; inset:0; background-image:radial-gradient(#745b992e .8px,transparent .8px); background-size:5px 5px; opacity:.18; mask-image:linear-gradient(transparent 50%,#000); }
@keyframes sky-drift { from { transform:translate3d(-1%,0,0) scale(1.01); } to { transform:translate3d(1%,1%,0) scale(1.045); } }
@keyframes float-glyph { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-5px) rotate(2deg); } }
@keyframes icon-wiggle { 0%,100% { transform:rotate(0); } 35% { transform:rotate(-9deg); } 70% { transform:rotate(7deg); } }
@keyframes icon-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
@keyframes icon-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes icon-turn { to { transform:rotate(360deg); } }
@keyframes spin { to { transform:rotate(360deg); } }

.topbar { display:flex; align-items:center; gap:20px; max-width:1440px; margin:auto; padding:24px 5%; background:transparent; }
.brand { display:inline-flex; align-items:center; gap:10px; flex:none; }
.brand-icon { display:inline-flex; width:42px; height:42px; color:var(--accent); }
.brand-icon svg { width:100%; height:100%; }
.brand b { font-size:29px; font-weight:400; letter-spacing:-1.1px; }
.brand b span { color:var(--accent); }
.brand-note { font-size:14px; color:#796a89; border-left:1px solid #9985b43b; padding-left:20px; }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:9px; }
.upload-button,.photo-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; border:1px solid #ffffffb3; color:var(--accent-deep); background:#fffaf269; border-radius:100px; backdrop-filter:blur(12px); }
.upload-button { padding:10px 17px; font-size:14px; }
.photo-button { width:42px; }
.upload-button:hover,.photo-button:hover { background:#fffcf3b8; box-shadow:0 4px 15px #6b528514; }
body[data-stage=upload] .header-actions { visibility:hidden; }
main { display:flex; flex-direction:column; align-items:stretch; max-width:1260px; margin:0 auto; padding:10px 5% 23px; }
.glass-panel { background:var(--glass); border:1px solid #ffffffd9; box-shadow:0 18px 70px #6751851f,inset 0 1px 0 #ffffffcc; backdrop-filter:blur(25px) saturate(115%); -webkit-backdrop-filter:blur(25px) saturate(115%); }
.flow-navigation { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:2px 0 15px; }
.back-button,.text-button { border:0; background:transparent; color:var(--accent-deep); padding:10px 0; min-height:40px; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.back-button { color:#79698a; }
.back-button:hover,.text-button:hover { color:var(--ink); }
.back-button>span { font-size:19px; }
body[data-stage=upload] .flow-navigation { display:none; }
body[data-stage=choose] #backToToolsBtn { visibility:hidden; }
.flow-progress { margin:0 auto 20px; width:100%; max-width:620px; }
.flow-steps { display:flex; justify-content:center; align-items:center; list-style:none; padding:0; margin:0; gap:14px; }
.flow-step { display:flex; align-items:center; gap:8px; color:#8a7a98; font-size:13px; white-space:nowrap; }
.step-number { display:flex; align-items:center; justify-content:center; width:25px; height:25px; border:1px solid #8c759542; background:#fff7ee45; border-radius:50%; font-size:12px; }
.step-connector { height:1px; width:28px; background:#967da139; }
body[data-stage=upload] .flow-step[data-step=upload],body[data-stage=choose] .flow-step[data-step=choose],body[data-stage=edit] .flow-step[data-step=edit],body[data-stage=result] .flow-step[data-step=edit] { color:var(--accent-deep); }
body[data-stage=upload] .flow-step[data-step=upload] .step-number,body[data-stage=choose] .flow-step[data-step=choose] .step-number,body[data-stage=edit] .flow-step[data-step=edit] .step-number,body[data-stage=result] .flow-step[data-step=edit] .step-number { background:var(--accent); color:#fff9f3; border-color:var(--accent); box-shadow:0 2px 8px #72528624; }
.flow-status { margin-top:9px; text-align:center; color:var(--accent-deep); font-size:13px; line-height:1.5; min-height:0; }
.flow-status:empty { display:none; }
body[data-stage=upload] .flow-progress { order:2; margin:25px auto 0; }

.landing-panel { align-self:center; width:100%; padding-top:12px; text-align:center; }
.landing-intro { margin-bottom:29px; }
.hello-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; background:#fffbf278; border:1px solid #ffffff9e; border-radius:100px; color:#887097; font-size:13px; }
.hello-pill svg { width:15px; height:15px; }
.landing-intro h1 { font-size:67px; line-height:1.03; letter-spacing:-2px; margin:18px 0 16px; color:#4b3d5c; }
.landing-intro h1 em { color:#8769a3; }
.landing-intro>p { color:#7a6b89; font-size:16px; line-height:1.55; }
.upload-card { width:min(100%,468px); margin:auto; border-radius:32px; padding:27px 40px 23px; position:relative; }
.upload-card::before { content:""; position:absolute; inset:11px; border:1px dashed #a48bb451; border-radius:23px; pointer-events:none; }
.upload-card.dragging { background:#fff8ebe6; box-shadow:0 0 0 5px #9174b52e,0 20px 70px #6751851f; }
.upload-glyph { display:flex; align-items:center; justify-content:center; position:relative; width:59px; height:59px; border-radius:20px; margin:0 auto 16px; background:linear-gradient(145deg,#eae1f7,#fbe5dd); color:#8769a3; border:1px solid #ffffffc4; box-shadow:0 5px 15px #8970910c; animation:float-glyph 6s ease-in-out infinite; }
.upload-glyph svg { width:28px; height:28px; stroke-width:1.3; }
.glyph-sparkle { position:absolute; right:-7px; top:3px; color:#ab87b0; font-size:18px; }
.upload-card h2 { font-size:23px; letter-spacing:-.5px; margin-bottom:5px; }
.upload-card>p { font-size:14px; color:var(--muted); }
.landing-upload-actions { display:flex; justify-content:center; gap:9px; margin:21px auto 15px; max-width:295px; }
.primary-button,.download-button { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:49px; padding:13px 17px; border:1px solid #9e82b2; border-radius:16px; color:#fffaf3; background:linear-gradient(135deg,#8663a2 0%,#755a99 75%); box-shadow:0 4px 14px #70538622,inset 0 1px 0 #ffffff3b; font-size:16px; }
.primary-button:hover:not(:disabled),.download-button:hover:not(:disabled) { border-color:#82659e; background:linear-gradient(135deg,#8864a5,#6e528f); box-shadow:0 7px 20px #70538630; transform:translateY(-1px); }
.button-arrow { margin-left:auto; font-size:18px; font-weight:400; opacity:.8; }
.primary-button>[data-icon],.download-button>[data-icon] { margin-right:2px; }
.landing-camera-button { display:flex; align-items:center; justify-content:center; width:49px; min-width:49px; min-height:49px; background:#fffbf394; border:1px solid #c6b2ce75; border-radius:16px; color:#897196; }
.landing-camera-button:hover { background:#eee4f5; }
.accepted-files { font-size:12px; color:#876e95; }
.sample-button { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:#8a7595; font-size:13px; padding:15px 5px 0; min-height:38px; }
.sample-button>span:not([data-icon]):not(:last-child) { color:var(--accent-deep); text-decoration:underline; text-decoration-color:#9a81ae5c; text-underline-offset:4px; }
.sample-button svg { width:13px; height:13px; }
.sample-button:hover { color:var(--accent-deep); }

.tool-picker { width:100%; max-width:930px; margin:0 auto; border-radius:32px; padding:31px 34px 26px; }
.picker-heading { text-align:center; }
.eyebrow { display:block; font-size:11px; letter-spacing:1.6px; color:#9380a0; line-height:1.4; }
.picker-heading h1 { font-size:36px; line-height:1.2; letter-spacing:-1px; margin:9px 0; }
.picker-heading p { color:var(--muted); font-size:15px; }
.chosen-file { display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; margin:22px auto 26px; padding:12px 17px; border:1px solid #b99ec034; border-radius:17px; background:#fbf6ff73; }
.chosen-file-icon { color:#9b7dab; width:36px; height:36px; background:#e8def185; border-radius:11px; }
.chosen-file>div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.chosen-file b { font-weight:400; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chosen-file div>span { font-size:12px; color:#86718f; }
.file-ready-dot { width:7px; height:7px; background:#91aa8e; border-radius:50%; margin-left:8px; flex:none; box-shadow:0 0 0 4px #91aa8e12; }
.tool-choices,.more-tool-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tool-choice,.tool-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:155px; gap:15px; padding:20px; border:1px solid #cab6d351; border-radius:21px; text-align:left; background:#fffdfb80; color:var(--ink); box-shadow:0 3px 9px #9275a004; }
.tool-choice:hover,.tool-tile:hover { background:#fffdfbdf; border-color:#b995c788; box-shadow:0 8px 24px #7f639118; transform:translateY(-3px); }
.tool-choice.active,.tool-choice[aria-pressed=true],.tool-tile.active { background:#eee5f6c7; border-color:#ac8cbc; }
.tool-choice-icon,.tool-tile-icon { width:43px; height:43px; display:flex; align-items:center; justify-content:center; border-radius:14px; color:#8b6fa5; background:#eee5f6; border:1px solid #ffffff75; }
.tool-choice-icon svg,.tool-tile-icon svg { width:23px; height:23px; animation:icon-float 5s ease-in-out infinite; }
.tool-choice:nth-child(2n) .tool-choice-icon svg { animation-delay:-1.5s; animation-duration:6s; }
.tool-choice:nth-child(3n) .tool-choice-icon svg { animation-delay:-3s; animation-duration:7s; }
.tool-choice[data-tool=background] .tool-choice-icon { background:#e8eef3; color:#7b96a3; }
.tool-choice[data-tool=gif] .tool-choice-icon { background:#f7e5df; color:#ba8b8b; }
.tool-choice[data-tool=resize] .tool-choice-icon { background:#e9ebdf; color:#969776; }
.tool-choice[data-tool=video] .tool-choice-icon { background:#e7e7f8; color:#8385ac; }
.tool-choice-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.tool-choice-copy b,.tool-choice>b,.tool-tile b { font-size:18px; font-weight:400; line-height:1.15; letter-spacing:-.25px; }
.tool-choice-copy small,.tool-choice small,.tool-tile small { color:#836e91; font-size:12px; line-height:1.4; max-width:23ch; }
.tool-choice-arrow,.tool-tile-arrow { position:absolute; top:23px; right:20px; color:#b69bc4; font-size:18px; transition:transform .2s; }
.tool-choice:hover .tool-choice-arrow { transform:translate(2px,-2px); }
.tool-choice:hover svg,.tool-tile:hover svg,.tool-tab:hover svg,.tool-tab.active svg { animation:icon-wiggle 1.3s ease-in-out 1; transform-origin:center; }
.tool-choice[data-tool=optimize]:hover svg,.tool-tab[data-tool=optimize].active svg { animation:icon-turn 7s linear infinite; }
.tool-choice[data-tool=effects]:hover svg,.tool-choice[data-tool=background]:hover svg { animation:icon-breathe 2s ease-in-out infinite; }
.more-tools-toggle { display:flex; justify-content:center; margin-top:20px; }
.more-tools-button { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; min-height:40px; padding:7px 13px; color:#9275a2; font-size:13px; border-radius:100px; }
.more-tools-button>span { font-size:20px; line-height:1; transition:transform .2s; }
.more-tools-button[aria-expanded=true]>span { transform:rotate(45deg); }
.more-tools-button:hover { background:#ebdff475; }
.more-tool-choices { padding-top:13px; border-top:1px solid var(--line); margin-top:13px; }
.more-tool-choices .tool-choice { min-height:136px; }

.editor-panel { border-radius:30px; padding:25px 29px 20px; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-bottom:22px; }
.workspace-heading>div:first-child { min-width:0; }
.workspace-heading .eyebrow { margin-bottom:5px; }
.workspace-heading h1 { font-size:24px; line-height:1.25; letter-spacing:-.5px; overflow-wrap:anywhere; }
.workspace-heading p { color:var(--muted); font-size:12px; margin-top:5px; }
.workspace-actions { display:flex; align-items:center; gap:3px; flex:none; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:0; background:transparent; color:#a48bb1; border-radius:12px; }
.icon-button:hover { background:#e9e0f183; color:var(--accent); }
.icon-button.active { color:var(--accent); }
.workspace { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.85fr); gap:30px; align-items:start; min-width:0; }
.preview-section { min-width:0; max-width:100%; }
.settings { padding:7px 0 0; min-width:0; }
.panel-heading { display:flex; align-items:center; gap:12px; margin-bottom:25px; }
.tool-symbol { width:42px; height:42px; background:#ece1f3; color:var(--accent); border:1px solid #fff9; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none; }
.panel-heading h2 { font-size:21px; line-height:1.2; margin-bottom:5px; letter-spacing:-.3px; }
.panel-heading p { font-size:12px; color:var(--muted); line-height:1.45; }
.field { margin-bottom:20px; }
.field label,.field-title { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; margin-bottom:9px; }
.field label>span,.field-title>span { color:#ad91b5; font-size:12px; }
.field small,.help { display:block; font-size:12px; line-height:1.55; color:#8c7399; margin-top:8px; }
.field input[type=number],.field input[type=text],.field select { width:100%; height:44px; border:1px solid #c9b4d158; border-radius:12px; background:#fffdf866; padding:0 12px; color:#6c597e; outline:none; }
.field input:focus,.field select:focus { border-color:#ab88c1; box-shadow:0 0 0 3px #a787c01a; }
.field input[type=color] { border:1px solid #c9b4d158; border-radius:12px; width:100%; height:44px; background:#fffdf866; padding:5px; }
.segmented { display:flex; padding:4px; border:1px solid #c9b4d14d; border-radius:13px; gap:4px; background:#f9f3fa50; }
.segmented button { flex:1; min-width:0; padding:9px 4px; min-height:35px; border:1px solid transparent; border-radius:9px; font-size:13px; color:#9982a6; background:transparent; }
.segmented button.selected { background:#eee0f5; border-color:#c2a2d140; color:var(--accent-deep); box-shadow:0 2px 5px #73558708; }
.two-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.two-fields .field { margin-bottom:16px; }
.range-labels { display:flex; justify-content:space-between; font-size:11px; color:#a18ca9; margin-top:2px; }
input[type=range] { accent-color:var(--accent); width:100%; min-height:28px; cursor:pointer; }
input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; margin:0; flex:none; }
.check-field { display:flex; align-items:center; gap:8px; font-size:13px; color:#877295; margin:0 0 19px; line-height:1.5; }
.advanced-options,#advancedOptions { border-top:1px solid var(--line); padding:3px 0 0; margin:7px 0 18px; color:#90789f; }
.advanced-options>summary,#advancedOptions>summary { cursor:pointer; padding:12px 0; font-size:13px; list-style:none; display:flex; align-items:center; gap:8px; }
.advanced-options>summary::before,#advancedOptions>summary::before { content:"+"; font-size:20px; width:14px; }
.advanced-options[open]>summary::before,#advancedOptions[open]>summary::before { content:"−"; }
.advanced-options>summary::-webkit-details-marker,#advancedOptions>summary::-webkit-details-marker { display:none; }
.advanced-options .field:first-of-type,#advancedOptions .field:first-of-type { margin-top:8px; }
#applyBtn { margin-top:19px; }
.result-summary { border-top:1px solid var(--line); margin-top:24px; padding:20px 0 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result-summary>div { display:flex; flex-direction:column; gap:5px; }
.result-summary span:first-child { font-size:12px; color:#a08baa; }
.result-summary strong { font-size:29px; font-weight:400; letter-spacing:-.5px; color:var(--accent); }
.saving { font-size:12px!important; padding:5px 9px; border:1px solid #bda4cd2b; border-radius:9px; background:#eaddf170; color:#9176a2!important; text-align:right; }
.download-button { margin-top:4px; }
.result-actions { display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:12px; }
.reverse-button { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 13px; min-height:42px; border:1px solid #c6acd052; border-radius:12px; background:#fffdf74f; color:#90739e; font-size:13px; width:100%; margin-bottom:16px; }
.reverse-button:hover { background:#eee2f391; border-color:#c0a0ce8f; }
#useResultBtn { margin:0; }
#editAgainBtn { font-size:12px; min-height:34px; color:#aa90b4; }
.file-drop { display:none; }
.privacy { display:flex; justify-content:center; gap:6px; align-items:flex-start; color:#8b7397; font-size:11px; line-height:1.6; text-align:center; margin-top:19px; }
.privacy svg { width:13px; height:13px; margin-top:2px; }
.privacy-detail { color:#92799f; font-size:11px; line-height:1.6; text-align:center; margin-top:3px; }
.privacy-detail summary { cursor:pointer; min-height:30px; display:flex; align-items:center; justify-content:center; }
.privacy-detail p { margin-bottom:8px; }
.result-ready { display:none; }
body[data-stage=edit] .result-summary,body[data-stage=edit] #downloadBtn,body[data-stage=edit] .result-actions { display:none; }
body[data-stage=result] #controls,body[data-stage=result] #applyBtn,body[data-stage=result] .panel-heading,body[data-stage=result] .editor-tools-details { display:none; }
body[data-stage=result] .result-ready { display:flex; flex-direction:column; align-items:flex-start; padding:14px 0 0; }
.result-check { display:flex; align-items:center; justify-content:center; width:49px; height:49px; margin-bottom:21px; border:1px solid #b3c3a941; border-radius:16px; background:#e8ede280; color:#91a080; font-size:26px; }
.result-ready h2 { font-size:28px; letter-spacing:-.6px; margin:8px 0; }
.result-ready p { font-size:13px; color:#a18cad; }

.preview-card { background:#eee5f196; border:1px solid #ffffff99; border-radius:23px; padding:15px 16px 17px; min-width:0; }
.preview-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; }
.preview-tabs { display:flex; gap:3px; background:#e2d5ee66; border:1px solid #ffffff5e; border-radius:11px; padding:3px; }
.preview-tabs button { border:0; padding:7px 11px; min-height:30px; border-radius:8px; color:#a088b0; background:transparent; font-size:12px; }
.preview-tabs button.selected { background:#fffcf5; color:#866799; box-shadow:0 1px 5px #74578608; }
.preview-top-actions { display:flex; align-items:center; gap:4px; flex:none; }
.preview-scale { font-size:11px; color:#aa94b5; }
.preview-fullscreen-button { width:32px; height:32px; }
.preview-fullscreen-button svg { width:17px; height:17px; }
.comparison { position:relative; aspect-ratio:4/3; border-radius:15px; overflow:hidden; background-color:#fffcf8; background-image:linear-gradient(45deg,#eae2ee 25%,transparent 25%),linear-gradient(-45deg,#eae2ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eae2ee 75%),linear-gradient(-45deg,transparent 75%,#eae2ee 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
#previewImages { position:absolute; inset:0; transform-origin:center; pointer-events:auto; will-change:transform; }
.comparison canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.comparison #sourceCanvas { clip-path:inset(0 50% 0 0); }
.image-label { position:absolute; top:12px; background:#fffaf1e6; border:1px solid #ffffff94; box-shadow:0 1px 5px #60446e09; padding:6px 9px; border-radius:100px; font-size:11px; color:#a28aae; z-index:2; }
.original-label { left:12px; }
.result-label { right:12px; color:#9271a6; }
.result-label span { font-size:10px; margin-left:4px; padding:2px 4px; border-radius:4px; background:#e9dcf166; }
.divider { position:absolute; height:100%; width:2px; background:#fff9f3; left:50%; pointer-events:none; z-index:3; }
.divider>span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:39px; height:39px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fffcf5; color:#9979ad; box-shadow:0 2px 12px #6540781a; font-size:20px; letter-spacing:2px; }
.comparison #compareRange { position:absolute; inset:0; width:100%; height:100%; min-height:0; opacity:0; z-index:4; margin:0; cursor:ew-resize; }
.comparison:focus-within .divider>span { outline:3px solid #9275bf; }
.comparison.result-only #sourceCanvas,.comparison.result-only #divider,.comparison.result-only #compareRange,.comparison.result-only #originalLabel { display:none; }
.preview-caption { display:flex; justify-content:space-between; gap:15px; padding:15px 1px 0; }
.preview-caption>div { min-width:0; display:flex; flex-direction:column; gap:5px; font-size:11px; color:#91749e; }
.preview-caption>div:last-child { text-align:right; }
.preview-caption b { color:#8a6d99; font-weight:400; font-size:12px; }
.preview-caption b.blue { color:#866095; }
.preview-caption span { overflow-wrap:anywhere; line-height:1.4; }
.frames-details { margin-top:12px; border:1px solid #baa3c832; background:#fffaf72e; border-radius:15px; padding:0 12px; min-width:0; max-width:100%; }
.frames-details>summary,.editor-tools-details>summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; color:#a18aaa; font-size:12px; list-style:none; }
.frames-details>summary::-webkit-details-marker,.editor-tools-details>summary::-webkit-details-marker { display:none; }
.frames-details>summary svg,.editor-tools-details>summary svg { width:15px; height:15px; opacity:.8; }
.details-chevron { margin-left:auto; font-size:19px; transition:transform .2s; }
.details-chevron:only-child { margin-left:0; }
details[open]>summary>.details-chevron { transform:rotate(180deg); }
.frame-count { font-size:10px; color:#aa8cb6; background:#e9def17a; padding:2px 5px; border-radius:5px; margin-left:3px; }
.playback { display:flex; align-items:center; gap:10px; padding-top:4px; }
.playback .icon-button { flex:none; width:32px; height:32px; }
.playback>span { font-size:11px; color:#aa90b6; white-space:nowrap; font-variant-numeric:tabular-nums; }
.playback input { min-height:28px; }
.filmstrip-heading { display:flex; justify-content:space-between; gap:10px; margin:10px 0 9px; font-size:11px; color:#b49dc0; }
.filmstrip-heading b { font-weight:400; }
.filmstrip { display:flex; gap:9px; overflow:auto; padding:2px 2px 12px; scrollbar-width:thin; scroll-snap-type:x proximity; overscroll-behavior-inline:contain; min-width:0; max-width:100%; }
.frame-button { position:relative; flex:0 0 65px; border:2px solid transparent; padding:3px; background:#fffbf6; border-radius:10px; height:58px; scroll-snap-align:center; }
.frame-button.active { border-color:#ab86bc; }
.frame-button canvas { width:100%; height:100%; object-fit:cover; border-radius:5px; background:repeating-conic-gradient(#e9e0ed 0% 25%,#fffcf7 0% 50%) 50%/12px 12px; }
.frame-button>span { position:absolute; bottom:5px; left:6px; background:#fff9f3b8; color:#9979a8; font-size:10px; padding:1px 4px; border-radius:3px; }
.editor-tools-details { border-top:1px solid var(--line); margin-top:24px; padding-top:3px; }
.editor-tools-details>summary { min-height:40px; }
.tools-wrap { position:relative; min-width:0; padding-top:7px; }
.tools { display:flex; gap:6px; overflow:auto; scrollbar-width:thin; padding-bottom:7px; scroll-snap-type:x proximity; overscroll-behavior-inline:contain; }
.tool-tab { flex:none; display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:10px 12px; border:1px solid transparent; border-radius:11px; color:#a28aad; background:transparent; font-size:12px; white-space:nowrap; scroll-snap-align:center; }
.tool-tab svg { width:16px; height:16px; }
.tool-tab:hover { background:#ede2f379; }
.tool-tab.active { background:#e9ddf0; color:var(--accent); border-color:#d2bddd7a; }
.tools-wrap.more-tools::after { content:""; position:absolute; right:0; top:7px; bottom:7px; width:24px; background:linear-gradient(90deg,transparent,#faf3f7); pointer-events:none; }

.ai-status-card { margin-top:17px; padding:13px 14px; border:1px solid #b897c45c; border-radius:14px; background:#f1e8f7a1; color:#8d6d9c; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.ai-status-card[data-status=failed],.ai-status-card[data-status=disconnected] { border-color:#c29b7a54; background:#fff1de9e; color:#a27a5e; }
.ai-status-card[data-status=cancelled] { border-color:#b5a6be47; background:#f1ecf2; color:#a18ba8; }
.ai-status-card p { font-size:11px; color:inherit; opacity:.85; margin:8px 0 0; }
.ai-status-card progress { display:block; width:100%; height:8px; accent-color:var(--accent); margin-top:11px; }
.ai-job-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:10px; }
.ai-job-actions button { border:1px solid #c3a8ce6e; color:#9974a6; background:#fffaf3; border-radius:9px; padding:8px 10px; font-size:11px; min-height:36px; }
.ai-details,.ai-retention { border:1px solid #c7aad042; border-radius:10px; background:#fbf6fd83; color:#a08aab; font-size:11px; line-height:1.6; }
.ai-details { padding:8px 10px; margin-top:11px; }
.ai-details summary,.ai-retention summary { cursor:pointer; color:#9978ac; }
.ai-details p { margin:8px 0 0; }
.ai-retention { border:0; background:transparent; margin-top:9px; padding:0; }
.ai-retention p { margin:6px 0 0; }
.processing { position:absolute; inset:0; z-index:7; background:#fffcf2c9; display:flex; flex-wrap:wrap; align-content:center; align-items:center; justify-content:center; gap:11px; font-size:14px; color:#9470a6; backdrop-filter:blur(6px); }
.processing b { font-weight:400; }
.processing small { flex-basis:100%; text-align:center; font-size:12px; color:#a28aae; margin-top:-4px; }
.process-cancel { min-height:44px; padding:0 18px; border:1px solid #d9c7e4; border-radius:100px; background:#fffcf5; color:#866799; font-size:13px; }
.process-cancel[hidden] { display:none; }
.spinner { width:21px; height:21px; border:2px solid #e4d4ed; border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
#videoPreview { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#42374e; z-index:5; }
.frame-edit-list { display:flex; flex-wrap:wrap; gap:6px; max-height:175px; overflow:auto; margin-bottom:17px; }
.frame-edit { display:flex; align-items:center; gap:4px; width:calc(50% - 3px); border:1px solid var(--line); padding:4px 6px; border-radius:9px; font-size:11px; color:#aa8bb6; background:#fffaf14f; }
.frame-edit button { background:none; border:0; color:#aa8bb6; min-width:24px; min-height:30px; padding:2px; font-size:16px; }
.frame-edit input { min-width:0; width:58px; height:30px; border:1px solid var(--line); border-radius:6px; padding:3px; background:#fffaf3; color:#9b7ca8; font-size:11px; margin-left:auto; }
.busy .primary-button { opacity:.65; }
.inline-note { padding:10px 12px; background:#eee1f58c; border-radius:11px; font-size:12px; color:#a081af; line-height:1.55; margin-bottom:19px; }
.mobile-action-rail { display:none; }
footer { order:5; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:38px; padding-top:14px; color:#9a83a4; font-size:11px; line-height:1.6; }
body[data-stage=upload] footer { margin-top:32px; }
.footer-star { color:#b89ab7; margin-left:5px; }
#installBtn { padding:8px 12px; min-height:38px; border:1px solid #bc9dca4d; border-radius:12px; background:#fff9ef69; color:#9872a9; font-size:12px; }
#pwaStatus,#installHelp { flex-basis:100%; text-align:center; margin:0; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); color:#fffcf4; background:#6b557ce8; border:1px solid #ffffff3b; border-radius:15px; padding:13px 19px; font-size:13px; line-height:1.5; z-index:80; max-width:calc(100% - 30px); box-shadow:0 6px 25px #57396722; backdrop-filter:blur(14px); }

/* Fullscreen uses the same quiet surface and keeps the original gesture controls. */
.preview-card:fullscreen,.preview-card.preview-fullscreen-fallback { display:flex; flex-direction:column; width:100vw; height:100dvh; max-width:none; padding:24px; padding-top:max(18px,env(safe-area-inset-top,0px)); padding-bottom:max(18px,env(safe-area-inset-bottom,0px)); border:0; border-radius:0; background:#f1e9f5; overflow:auto; }
.preview-card.preview-fullscreen-fallback { position:fixed; inset:0; z-index:60; }
.preview-card:fullscreen .comparison,.preview-fullscreen-fallback .comparison { flex:1; min-height:0; aspect-ratio:auto; touch-action:none; }
.preview-card.preview-fullscreen-fallback .preview-caption { padding-bottom:8px; }
body.preview-modal-open { overflow:hidden; }
.preview-zoom { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding-top:12px; font-size:12px; color:#a184b0; }
.preview-zoom button { min-height:44px; min-width:44px; }
.preview-zoom #zoomResetBtn { padding:10px 14px; border:1px solid #c6abd04d; border-radius:12px; background:#fffaf1; color:#9776a7; }
.preview-zoom output { min-width:45px; text-align:center; font-variant-numeric:tabular-nums; }
.comparison.zoomed #compareRange { pointer-events:none; }

@media(min-width:1450px) {
  .topbar { padding-top:30px; padding-bottom:30px; }
  main { padding-top:17px; }
  .landing-panel { padding-top:28px; }
  .landing-intro h1 { font-size:73px; }
  .upload-card { padding-top:32px; padding-bottom:27px; }
}
@media(max-width:1000px) {
  .workspace { grid-template-columns:minmax(0,1.2fr) minmax(245px,1fr); gap:22px; }
  .editor-panel { padding:23px; }
  .preview-card { padding:13px; }
  .preview-top { flex-wrap:wrap; }
  .preview-top-actions { margin-left:auto; }
  .frame-edit { width:100%; }
}
@media(max-width:760px) {
  .topbar { padding:19px 5%; }
  .brand-note { font-size:12px; padding-left:15px; }
  main { padding-left:5%; padding-right:5%; }
  .tool-picker { padding:27px 25px 23px; }
  .tool-choices,.more-tool-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace { grid-template-columns:minmax(0,1fr); gap:24px; }
  .settings { padding:1px 2px 0; }
  .panel-heading { margin-bottom:23px; }
  .preview-top { flex-wrap:nowrap; }
  .frame-edit { width:calc(50% - 3px); }
  .result-ready { align-items:center!important; text-align:center; }
  .result-check { margin-bottom:16px; }
  body[data-stage=result] .settings { max-width:420px; width:100%; margin:auto; }
  .filmstrip-heading>span { font-size:10px; }
}
@media(max-width:650px) {
  html { scroll-padding-bottom:calc(96px + var(--keyboard-offset,0px) + env(safe-area-inset-bottom,0px)); }
  .topbar { padding:16px 5%; gap:12px; }
  .brand { gap:7px; min-height:44px; }
  .brand-icon { width:34px; height:34px; }
  .brand b { font-size:26px; }
  .brand-note { display:none; }
  .header-actions { gap:7px; }
  .upload-button { min-height:44px; padding:9px 12px; font-size:12px; }
  .photo-button { width:44px; min-height:44px; }
  main { padding-top:6px; padding-bottom:20px; }
  body[data-stage=edit] main,body[data-stage=result] main { padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
  .landing-panel { padding-top:18px; }
  .landing-intro { margin-bottom:25px; }
  .hello-pill { font-size:12px; padding:6px 11px; }
  .landing-intro h1 { font-size:54px; letter-spacing:-1.7px; margin-top:18px; margin-bottom:16px; }
  .landing-intro>p { max-width:330px; font-size:14px; line-height:1.55; margin:auto; }
  .landing-intro>p br { display:none; }
  .upload-card { max-width:400px; padding:25px 28px 22px; border-radius:29px; }
  .upload-card::before { border-radius:21px; }
  .upload-card h2 { font-size:22px; }
  .upload-glyph { width:56px; height:56px; margin-bottom:15px; }
  .landing-upload-actions { margin-top:21px; }
  .sample-button { font-size:12px; padding-top:17px; min-height:44px; }
  .flow-navigation { margin-bottom:13px; margin-top:0; gap:10px; }
  .back-button,.text-button { font-size:12px; min-height:44px; }
  .flow-progress { margin-bottom:18px; }
  .flow-steps { gap:8px; }
  .flow-step { gap:6px; font-size:11px; }
  .step-number { width:22px; height:22px; font-size:10px; }
  .step-connector { width:12px; }
  .flow-status { font-size:12px; margin-top:9px; }
  body[data-stage=upload] .flow-progress { margin-top:28px; }
  .tool-picker { padding:25px 18px 19px; border-radius:27px; }
  .eyebrow { font-size:10px; letter-spacing:1.15px; }
  .picker-heading h1 { font-size:29px; letter-spacing:-.75px; margin:9px 0 10px; }
  .picker-heading p { font-size:13px; }
  .chosen-file { margin:20px auto 22px; padding:10px 12px; gap:9px; border-radius:14px; }
  .chosen-file-icon { width:32px; height:32px; border-radius:10px; }
  .chosen-file b { font-size:13px; }
  .chosen-file div>span { font-size:11px; }
  .file-ready-dot { margin-left:4px; width:6px; height:6px; }
  .tool-choices,.more-tool-choices { gap:10px; }
  .tool-choice,.tool-tile { min-height:145px; padding:17px 14px; gap:13px; border-radius:18px; }
  .tool-choice-icon,.tool-tile-icon { width:39px; height:39px; border-radius:12px; }
  .tool-choice-icon svg { width:22px; height:22px; }
  .tool-choice-copy b,.tool-choice>b,.tool-tile b { font-size:16px; }
  .tool-choice-copy small,.tool-choice small,.tool-tile small { font-size:11px; line-height:1.4; }
  .tool-choice-arrow,.tool-tile-arrow { top:19px; right:14px; font-size:15px; }
  .more-tools-toggle { margin-top:14px; }
  .more-tools-button { min-height:44px; font-size:12px; }
  .editor-panel { padding:19px 16px 14px; border-radius:25px; }
  .workspace-heading { padding-bottom:18px; gap:10px; }
  .workspace-heading h1 { font-size:20px; letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .workspace-heading p { font-size:11px; }
  .workspace-actions { gap:0; }
  .workspace-actions .icon-button { width:44px; height:44px; }
  .workspace-actions svg { width:17px; height:17px; }
  .workspace { gap:22px; }
  .preview-card { padding:11px 11px 14px; border-radius:19px; }
  .preview-top { gap:4px; margin-bottom:11px; }
  .preview-tabs { padding:3px; gap:2px; }
  .preview-tabs button { min-height:44px; font-size:11px; padding:7px 9px; }
  .preview-top-actions { gap:1px; }
  .preview-scale { font-size:10px; }
  .preview-fullscreen-button { min-width:44px; width:44px; height:44px; }
  .comparison { border-radius:12px; }
  .image-label { font-size:10px; padding:5px 8px; top:10px; }
  .original-label { left:10px; }
  .result-label { right:10px; }
  .preview-caption { gap:10px; padding-top:13px; }
  .preview-caption>div { font-size:10px; }
  .preview-caption b { font-size:11px; }
  .frames-details { margin-top:11px; padding:0 10px; border-radius:13px; }
  .frames-details>summary,.editor-tools-details>summary { min-height:44px; }
  .playback { gap:8px; }
  .playback .icon-button { width:44px; height:44px; }
  input[type=range],.playback input { min-height:44px; }
  .filmstrip-heading>span { display:none; }
  .frame-button { min-width:61px; height:57px; }
  .filmstrip { scroll-padding-inline:10px; }
  .panel-heading h2 { font-size:22px; }
  .panel-heading p { font-size:12px; }
  .field input[type=number],.field input[type=text],.field input[type=color],.field select,.frame-edit input { min-height:44px; font-size:16px; }
  .field label { font-size:14px; }
  .field small { font-size:12px; }
  .segmented button,.reverse-button,.check-field,.ai-job-actions button { min-height:44px; }
  .segmented button { font-size:13px; }
  .check-field { margin-bottom:15px; }
  .frame-edit button { min-width:44px; min-height:44px; }
  .frame-edit { width:100%; }
  .frame-edit input { width:75px; font-size:14px; }
  .advanced-options>summary,#advancedOptions>summary { min-height:44px; }
  .ai-details summary,.ai-retention summary { display:flex; align-items:center; min-height:44px; }
  .privacy-detail summary { min-height:44px; }
  .tool-tab { min-height:44px; }
  #editAgainBtn { min-height:44px; }
  .preview-zoom .icon-button { width:44px; height:44px; }
  .mobile-action-rail { grid-template-columns:minmax(0,1fr) auto; gap:8px; position:fixed; left:0; right:0; bottom:var(--keyboard-offset,0px); z-index:50; padding:10px max(15px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(15px,env(safe-area-inset-left,0px)); background:#fff7eee8; border-top:1px solid #ffffffc9; box-shadow:0 -6px 24px #67487613; backdrop-filter:blur(20px); }
  body[data-stage=edit] .mobile-action-rail,body[data-stage=result] .mobile-action-rail { display:grid; }
  .mobile-action-rail button { min-height:48px; border-radius:14px; font-size:14px; display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 16px; }
  .mobile-action-primary { border:1px solid #9879ae; background:linear-gradient(135deg,#8663a2,#755a99); color:#fffaf3; box-shadow:0 3px 9px #76558919; }
  .mobile-action-secondary { border:1px solid #c9afcf60; background:#fffaf38f; color:#9b79a9; font-size:12px!important; }
  .mobile-action-cancel { border-color:#d7b19465; background:#ffefdc; color:#b18767; }
  body[data-stage=edit] #mobileDownloadBtn,body[data-stage=edit] #mobileUseResultBtn,body[data-stage=result] #mobileApplyBtn { display:none; }
  .mobile-action-rail[data-pending=true] #mobileApplyBtn,.mobile-action-rail[data-pending=true] #mobileDownloadBtn { display:none; }
  .mobile-action-rail[data-pending=true] { grid-template-columns:minmax(0,1fr); }
  .mobile-action-rail[data-result=false] #mobileUseResultBtn { display:none; }
  .toast { bottom:calc(86px + env(safe-area-inset-bottom,0px)); font-size:12px; }
  body[data-stage=upload] .toast,body[data-stage=choose] .toast { bottom:22px; }
  footer { justify-content:center; gap:5px; text-align:center; margin-top:26px; padding-top:8px; font-size:10px; }
  footer>span { flex-basis:100%; }
  body[data-stage=upload] footer { margin-top:25px; }
  #installBtn { margin-top:6px; min-height:44px; }
  .preview-card:fullscreen,.preview-card.preview-fullscreen-fallback { padding:14px; padding-top:max(14px,env(safe-area-inset-top,0px)); padding-bottom:max(14px,env(safe-area-inset-bottom,0px)); }
  .preview-zoom>span { flex-basis:100%; text-align:center; }
}
@media(max-width:380px) {
  .topbar { padding-left:4%; padding-right:4%; }
  main { padding-left:4%; padding-right:4%; }
  .brand b { font-size:24px; }
  .landing-intro h1 { font-size:48px; }
  .landing-panel { padding-top:16px; }
  .upload-card { padding-left:23px; padding-right:23px; }
  .flow-steps { gap:6px; }
  .flow-step { font-size:10px; gap:5px; }
  .step-connector { width:8px; }
  .step-number { width:21px; height:21px; }
  .tool-picker { padding-left:14px; padding-right:14px; }
  .picker-heading h1 { font-size:27px; }
  .tool-choice,.tool-tile { padding:15px 12px; min-height:142px; }
  .tool-choice-copy b,.tool-choice>b,.tool-tile b { font-size:15px; }
  .tool-choice-copy small,.tool-choice small { font-size:10px; }
  .tool-choice-arrow { right:12px; top:16px; }
  .editor-panel { padding-left:13px; padding-right:13px; }
  .preview-scale { display:none; }
  .workspace-heading h1 { font-size:18px; }
  .workspace-actions .icon-button { width:44px; }
  .mobile-action-rail { padding-left:12px; padding-right:12px; }
  .mobile-action-rail button { padding-left:12px; padding-right:12px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .sky-layer { transform:none; will-change:auto; }
  .tool-choice:hover,.tool-tile:hover,.primary-button:hover,.download-button:hover { transform:none; }
}
/* Crop frame: edits the working image, so the source canvas is shown while it is active. */
.comparison.cropping #resultCanvas,.comparison.cropping .result-label { visibility:hidden; }
.comparison.cropping #sourceCanvas { display:block !important; clip-path:none !important; }
.crop-box { position:absolute; z-index:5; box-shadow:0 0 0 9999px #2a183a59; outline:2px solid #fffaf3; cursor:move; touch-action:none; }
.crop-box[hidden] { display:none; }
.crop-box:focus-visible { outline:3px solid #9275bf; }
.crop-box::before,.crop-box::after { content:""; position:absolute; pointer-events:none; }
.crop-box::before { inset:33.333% 0; border-block:1px solid #fffaf380; }
.crop-box::after { inset:0 33.333%; border-inline:1px solid #fffaf380; }
.crop-handle { position:absolute; width:32px; height:32px; margin:-16px 0 0 -16px; touch-action:none; }
.crop-handle::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#fffcf5; border:2px solid #9a7ab0; box-shadow:0 1px 6px #50306e40; }
.crop-handle[data-handle="nw"] { left:0; top:0; cursor:nwse-resize; }
.crop-handle[data-handle="ne"] { left:100%; top:0; cursor:nesw-resize; }
.crop-handle[data-handle="sw"] { left:0; top:100%; cursor:nesw-resize; }
.crop-handle[data-handle="se"] { left:100%; top:100%; cursor:nwse-resize; }
@media (pointer:coarse) { .crop-handle { width:44px; height:44px; margin:-22px 0 0 -22px; } .crop-handle::after { inset:14px; } }
.video-placeholder { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; text-align:center; background:#fffcf8e6; color:#866799; font-size:13px; }
.video-placeholder[hidden] { display:none; }
.video-placeholder span { max-width:280px; color:#a28aae; font-size:12px; }