@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700;750&display=swap');

/* Palette inspired by AISA's light theme: periwinkle surfaces and blue/violet/pink light. */
:root {
  --accent:#4f46e5;
  --accent-hover:#4338ca;
  --accent-end:#7c3aed;
  --accent-gradient:linear-gradient(135deg,var(--accent),var(--accent-end));
  --title-gradient:linear-gradient(90deg,#60a5fa 0%,#a78bfa 55%,#e879f9 100%);
  --page:#eef2ff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#c7d2fe;
  --focus:#818cf8;
  --split:44%;
  --photo-aspect:.8;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--page); color:var(--ink); font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
[hidden] { display:none!important; }
.wrap { width:calc(100% - 120px); max-width:1320px; margin-inline:auto; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.hero-backdrop { position:fixed; z-index:-1; inset:0; height:auto; background:radial-gradient(ellipse at 84% 29%,#e879f930 0,transparent 42%),radial-gradient(ellipse at 11% 34%,#60a5fa30 0,transparent 48%),radial-gradient(ellipse at 53% 8%,#a78bfa2b 0,transparent 52%); pointer-events:none; }
.hero-backdrop::after { content:''; position:absolute; inset:0; background-image:linear-gradient(#818cf81c 1px,transparent 1px),linear-gradient(90deg,#818cf81c 1px,transparent 1px); background-size:100px 100px; mask-image:linear-gradient(#0007,transparent 80%); }
.header { height:64px; width:calc(100% - 160px); max-width:1240px; margin-top:18px; padding:8px 12px 8px 25px; border:1px solid #a5b4fc55; border-radius:40px; background:#ffffff94; box-shadow:0 2px 3px #4f46e509; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:8px; font-size:29px; font-weight:750; letter-spacing:-1.2px; }
.brand-mark { width:28px; height:28px; color:var(--accent); flex-shrink:0; }
.brand-logo { display:block; width:124px; height:auto; flex-shrink:0; }
.footer .brand-logo { width:108px; }
@media(max-width:680px) { .brand-logo { width:112px; } }
.header nav { display:flex; gap:35px; align-items:center; font-size:12px; font-weight:500; }
.header nav button { border:0; background:none; color:inherit; padding:5px 0; }
.header nav a:hover,.header nav button:hover { color:var(--accent); }
.button { border:0; border-radius:24px; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-size:13px; font-weight:500; padding:12px 22px; transition:background .16s,transform .16s; }
.button:hover { transform:translateY(-1px); }
.button .icon { width:16px; height:16px; }
.button-accent { background:var(--accent-gradient); color:white; box-shadow:0 7px 20px #6366f11c,inset 0 1px 1px #ffffff20; }
.button-accent:hover { background:linear-gradient(135deg,var(--accent-hover),#6d28d9); }
.header-cta { padding:12px 23px; font-size:12px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,min(32vw,410px)); gap:32px; padding:56px 40px 0; align-items:stretch; }
.hero-copy { padding-bottom:0; min-width:0; }
.eyebrow { font-size:11px; font-weight:650; letter-spacing:1.4px; color:var(--accent); margin:0 0 23px; }
h1 { font-size:clamp(38px,3.45vw,53px); font-weight:750; line-height:1.07; letter-spacing:-1.8px; margin:0 0 19px; }
h1>.title-accent { color:var(--accent); background:var(--title-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-description { font-size:17px; line-height:1.65; color:#475569; margin:0 0 22px; }
.upload-area { border:1.5px dashed #a5b4fc; border-radius:19px; background:#ffffff70; --upload-height:220px; height:var(--upload-height); min-height:var(--upload-height); display:flex; flex-direction:column; justify-content:center; position:relative; transition:background .15s,border-color .15s; }
.upload-area.dragging { border-color:var(--accent); background:#e0e7ff; }
.upload-area:focus-within { border-color:var(--focus); }
.upload-empty { display:flex; align-items:center; flex-direction:column; gap:10px; padding:18px 15px; }
.upload-icon { width:38px; height:38px; color:var(--accent); stroke-width:2; margin-bottom:3px; }
.upload-empty strong { font-size:16px; font-weight:650; }
.upload-empty .button { font-size:13px; padding:12px 22px; }
.upload-hint { display:inline-flex; flex-wrap:nowrap; flex-shrink:0; align-items:center; gap:7px; color:var(--muted); margin-top:3px; font-size:10px; white-space:nowrap; max-width:100%; }
.upload-hint>span { flex-shrink:0; }
.hint-divider { height:11px; width:1px; background:#c7d2fe; margin-inline:2px; }
.paste-shortcut { display:inline-flex; align-items:center; gap:4px; }
.paste-shortcut kbd { font:inherit; font-weight:500; color:#475569; background:#ffffffb3; border:1px solid #d9dfff; border-radius:4px; padding:2px 4px; line-height:1.2; box-shadow:0 1px 0 #c7d2fe60; }
.upload-error { position:absolute; z-index:2; bottom:8px; left:8px; right:8px; color:#ae344d; background:#fff; border-radius:8px; font-size:12px; line-height:1.6; margin:0; padding:4px 8px; text-align:center; }
.upload-error:empty { display:none; }
.upload-summary { display:flex; align-items:center; gap:19px; padding:23px; min-width:0; }
.upload-summary img { width:100px; height:135px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.upload-summary>div { min-width:0; }

.photo-actions { display:flex; gap:8px; font-size:10px; color:#64748b; margin-top:12px; }
.photo-actions button { color:#475569; border:0; background:none; padding:0; font-size:10px; }
.photo-actions button:hover { color:var(--accent); }




.hero-preview { min-width:0; position:relative; container-type:size; }
#example-preview { position:absolute; inset:0; }
.portrait-frame { position:absolute; right:0; bottom:0; width:min(100%,calc(110cqh * var(--photo-aspect))); height:min(110%,calc(100cqw / var(--photo-aspect))); margin-left:auto; padding:4px; background:#fff; border:1.5px solid #a5b4fc; border-radius:16px; box-shadow:0 3px 9px #6366f112; }
.comparison { position:relative; width:100%; height:100%; container-type:size; overflow:hidden; border-radius:11px; background:#e2e8f0; }
.compare-layer { position:absolute; inset:0; overflow:hidden; }
.comparison-source { position:absolute; width:max(100cqw,100cqh); height:max(100cqw,100cqh); top:50%; left:50%; transform:translate(-50%,-50%); display:block; object-fit:cover; }
.before-layer { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.image-label { position:absolute; top:15px; z-index:1; border-radius:20px; background:#ffffffe3; color:var(--ink); padding:7px 15px; font-size:11px; font-weight:500; backdrop-filter:blur(8px); pointer-events:none; }
.label-before { left:15px; }
.label-after { right:15px; background:var(--accent-gradient); color:#fff; }
.compare-divider { position:absolute; top:0; bottom:0; left:var(--split); width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; z-index:2; box-shadow:0 0 3px #0002; }
.compare-handle { position:absolute; top:64%; left:50%; transform:translate(-50%,-50%); width:37px; height:37px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 2px 10px #0002; }
.compare-handle svg { width:23px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.compare-range { position:absolute; z-index:3; margin:0; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.comparison:focus-within { outline:3px solid var(--focus); outline-offset:-3px; }
.drag-hint { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); padding:7px 13px; background:#ffffffe5; color:var(--ink); border-radius:20px; font-size:11px; white-space:nowrap; z-index:2; backdrop-filter:blur(8px); pointer-events:none; }
h2 { font-size:37px; letter-spacing:-1.2px; font-weight:750; line-height:1.15; margin:0 0 7px; }
.preset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px 24px; }
.preset { display:block; background:none; padding:0; border:0; text-align:left; color:var(--ink); min-width:0; }
.preset-image { position:relative; display:block; aspect-ratio:1.45; overflow:hidden; border-radius:12px; background:#e2e8f0; transition:box-shadow .15s; }
.gallery-source { position:absolute; top:-8%; left:0; width:100%; aspect-ratio:1; height:auto; display:block; object-fit:cover; }
.preset.active .preset-image { box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--accent); }
.preset:hover .preset-image { box-shadow:0 0 0 2px #fff,0 0 0 3.5px #818cf8; }
.preset-check { position:absolute; right:15px; top:14px; width:24px; height:24px; border:2px solid #ffffffde; background:#ffffff19; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:0 1px 4px #0001; backdrop-filter:blur(4px); }
.preset-check .icon { width:16px; height:16px; stroke-width:2.3; display:none; }
.active .preset-check { background:var(--accent-gradient); }
.active .preset-check .icon { display:block; }
.preset>strong { display:block; font-size:16px; font-weight:700; letter-spacing:-.25px; margin:12px 0 5px; }
.footer { border-top:1px solid #c7d2fe; padding:23px 0 25px; display:flex; align-items:center; gap:20px; color:#64748b; font-size:10px; }
.footer .brand { color:var(--ink); font-size:24px; gap:7px; }
.footer .brand-mark { width:26px; height:26px; }
.footer-divider { width:1px; height:13px; background:#a5b4fc; }

dialog { border:1px solid #c7d2fe; border-radius:22px; background:#fff; color:var(--ink); max-width:490px; width:calc(100% - 32px); padding:37px; box-shadow:0 25px 100px #312e8140; }
dialog::backdrop { background:#0f172a70; backdrop-filter:blur(5px); }
dialog .eyebrow { font-size:9px; margin:0 0 12px; }
dialog h2 { font-size:32px; margin-right:15px; }
.dialog-close { position:absolute; right:13px; top:13px; display:flex; padding:7px; border:0; background:none; color:#64748b; border-radius:50%; }
.guide-steps { padding-left:21px; font-size:13px; margin:25px 0; }
.guide-steps li { padding-left:7px; margin-top:19px; }
.guide-steps li::marker { color:var(--accent); font-weight:600; }
.guide-steps p,.dialog-note { font-size:12px; line-height:1.8; color:#64748b; }
.guide-steps p { margin:6px 0 0; }
.dialog-note { background:#eef2ff; border-radius:10px; padding:13px 15px; margin:20px 0; }
.photo-tips { padding-left:18px; font-size:13px; line-height:1.8; color:#475569; margin:25px 0; }
.photo-tips li { margin:10px 0; padding-left:5px; }
.photo-tips li::marker { color:var(--accent); }
.generation-copy { font-size:13px; line-height:1.8; color:var(--muted); margin-top:20px; }
body.modal-open { overflow:hidden; }
@media(min-width:1550px) { .hero { gap:40px; padding-top:56px; } .hero-description { font-size:18px; } .upload-area { --upload-height:240px; } }
@media(max-width:1150px) {
  .wrap { width:calc(100% - 80px); }
  .header { width:calc(100% - 100px); }
  .hero { gap:28px; padding:36px 30px 0; }
  h1 { font-size:38px; letter-spacing:-1.3px; }
  .hero-description { font-size:14px; margin-bottom:24px; }
  .upload-area { --upload-height:192px; }
  .upload-empty { gap:8px; padding:12px 18px; }
  .upload-empty strong { font-size:14px; }
  .upload-icon { width:32px; height:32px; }
  
  
  
  h2 { font-size:32px; }
  .preset>strong { font-size:14px; }
  .upload-summary { padding:18px; gap:13px; }
  .upload-summary img { width:73px; height:115px; }
  
}
@media(max-width:900px) {
  .wrap { width:calc(100% - 48px); }
  .header { width:calc(100% - 48px); padding-left:18px; }
  .header nav { gap:22px; font-size:11px; }
  .hero { padding-inline:12px; gap:24px; grid-template-columns:minmax(0,1fr) minmax(0,34vw); }
  h1 { font-size:31px; letter-spacing:-1.1px; }
  .hero-description { font-size:12px; }
  .eyebrow { font-size:8px; }
  .upload-area { --upload-height:175px; }
  .upload-empty strong { font-size:13px; }
  .upload-empty .button { font-size:11px; padding:10px 19px; }
  .upload-hint { font-size:9px; gap:5px; }
  
  
  
  .preset-grid { gap:22px 18px; }
  .preset-check { width:20px; height:20px; top:10px; right:10px; }
  .preset-check .icon { width:13px; height:13px; }
  .preset>strong { font-size:13px; }
}
@media(max-width:680px) {
  html { scroll-padding-top:25px; }
  .wrap { width:calc(100% - 36px); }
  .header { height:57px; width:calc(100% - 28px); margin-top:12px; padding:6px 7px 6px 14px; gap:10px; }
  .brand { font-size:25px; }
  .brand-mark { width:26px; height:26px; }
  .header nav { display:none; }
  .header-cta { font-size:11px; padding:11px 17px; gap:8px; }
  .hero-backdrop { height:auto; background:radial-gradient(ellipse at 96% 5%,#e879f92b 0,transparent 42%),radial-gradient(ellipse at 0% 30%,#60a5fa30 0,transparent 48%),radial-gradient(ellipse at 65% 50%,#a78bfa26 0,transparent 44%); }
  .hero { display:flex; flex-direction:column; gap:16px; padding:34px 5px 0; }
  .hero-copy { width:100%; padding:0; }
  .eyebrow { font-size:8px; letter-spacing:1.1px; margin-bottom:16px; }
  h1 { font-size:clamp(27px,7.75vw,42px); line-height:1.12; letter-spacing:-1.25px; margin-bottom:15px; }
  .hero-description { font-size:12px; line-height:1.8; margin-bottom:22px; }
  .hero-description br { display:none; }
  .upload-area { --upload-height:188px; border-radius:15px; }
  .upload-empty { gap:9px; padding:15px 12px; }
  .upload-empty strong { font-size:14px; }
  .upload-empty .button { font-size:12px; padding:11px 21px; }
  .upload-hint { font-size:9px; gap:5px; }
  
  
  
  
  .hero-preview { width:100%; max-width:420px; container-type:normal; }
  #example-preview { position:relative; inset:auto; }
  .portrait-frame { position:relative; right:auto; bottom:auto; width:100%; height:auto; border-radius:13px; }
  .comparison { height:auto; aspect-ratio:var(--photo-aspect); border-radius:9px; }
  .image-label { padding:6px 11px; font-size:10px; top:13px; }
  .label-before { left:13px; } .label-after { right:13px; }
  .compare-handle { width:33px; height:33px; }
  .drag-hint { font-size:10px; bottom:13px; padding:6px 12px; }
  h2 { font-size:31px; letter-spacing:-.9px; }
  .preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 15px; }
  .preset-image { aspect-ratio:1; border-radius:9px; }
  .gallery-source { top:0; }
  .preset-check { width:20px; height:20px; top:9px; right:9px; }
  .preset>strong { font-size:12px; margin:11px 0 4px; }
  .upload-summary { padding:20px 17px; gap:14px; }
  .upload-summary img { width:85px; height:130px; }
  
  .footer { gap:12px; font-size:8px; padding:20px 0; flex-wrap:wrap; }
  .footer .brand { font-size:21px; }
  .footer .brand-mark { width:22px; height:22px; }
  .footer-divider { height:10px; }
  dialog { padding:31px 25px; }
  dialog h2 { font-size:28px; }
}
@media(max-width:360px) { .wrap { width:calc(100% - 30px); } .hero { padding-inline:2px; }   .filter { font-size:9px; padding-inline:7px; } .upload-summary img { width:67px; }  }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* Presets sit below the upload and comparison hero. */
/* Uploaded content stays inside the original upload box. */
.upload-summary { position:absolute; inset:0; display:block; padding:12px; }
.upload-summary img { display:block; width:100%; height:100%; border-radius:10px; object-fit:contain; background:#e0e7ff70; }
.upload-summary .uploaded-details { display:contents; }
.photo-actions { position:absolute; top:20px; right:20px; display:flex; gap:8px; margin:0; }
.photo-actions button { width:36px; height:36px; padding:0; display:grid; place-items:center; border:1px solid #c7d2fe; border-radius:50%; background:#fffffff2; color:var(--accent); box-shadow:0 2px 6px #4f46e509; }
.photo-actions button:hover { background:#e0e7ff; }
.photo-actions #remove-photo:hover { color:#ae344d; background:#fff1f2; border-color:#fecdd3; }
.photo-actions .icon { width:18px; height:18px; }
.photo-actions button:focus-visible { outline-offset:3px; }
.has-photo .upload-area { border-style:solid; background:#ffffff85; }
.scene-picker { padding:10px 40px 0; }
.scene-picker .preset-grid { align-items:start; grid-template-columns:repeat(var(--preset-columns,6),minmax(0,1fr)); gap:18px; padding:4px; }
.presets-status { margin:4px; color:var(--muted); font-size:14px; }
.scene-picker .preset-image { aspect-ratio:4/5; border-radius:10px; }
.scene-picker .gallery-source { top:0; width:125%; left:-12.5%; }
.scene-picker .preset>strong { font-size:12px; margin:9px 0 0; line-height:1.4; font-weight:650; letter-spacing:-.1px; }
.button:disabled { background:#dce2f3; color:#78849d; box-shadow:none; cursor:default; transform:none; }
.footer { margin-top:36px; }
@media(max-width:1150px) and (min-width:681px) {
  .scene-picker { padding:10px 30px 0; }
}
@media(max-width:900px) and (min-width:681px) { .scene-picker { padding-inline:12px; } .scene-picker .preset-grid { gap:12px; } }
@media(max-width:680px) {
  .upload-summary { padding:10px; }
  .photo-actions { top:18px; right:18px; gap:7px; }
  .scene-picker { padding:8px 5px 0; }
  .scene-picker .preset-grid { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 4px 10px; }
  .scene-picker .preset { flex:0 0 110px; scroll-snap-align:start; }
  .scene-picker .preset-image { aspect-ratio:4/5; border-radius:9px; }
  .scene-picker .preset>strong { font-size:10px; margin-top:8px; }
  .scene-picker .preset-check { width:20px; height:20px; right:9px; top:9px; }
  .footer { margin-top:28px; }
}

/* The viewer enlarges images without changing the upload box. */
.expand-comparison { position:absolute; right:14px; bottom:14px; z-index:4; width:34px; height:34px; display:grid; place-items:center; border:1px solid #ffffff80; border-radius:50%; color:var(--ink); background:#fffffff0; box-shadow:0 2px 8px #0001; }
.expand-comparison .icon { width:17px; height:17px; }
.expand-comparison:hover { background:#fff; }
.photo-viewer { width:fit-content; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:48px 14px 14px; background:#eef2ff; overflow:hidden; }
.photo-viewer .dialog-close { color:var(--ink); background:#fff; right:12px; top:9px; }
#viewer-content { max-width:calc(100vw - 62px); }
#viewer-content>img { display:block; max-width:100%; max-height:calc(100dvh - 100px); width:auto; height:auto; border-radius:12px; object-fit:contain; }
#viewer-content .comparison { width:min(70vw,calc((100dvh - 100px) * var(--photo-aspect))); height:auto; aspect-ratio:var(--photo-aspect); border-radius:12px; }
.login-panel { margin-top:24px; }
.login-panel[hidden] { display:none; }
.login-panel>p { font-size:14px; line-height:1.6; color:var(--muted); }
#google-signin-button { display:flex; justify-content:center; margin:24px 0 18px; }
.google-placeholder { display:flex; justify-content:center; align-items:center; gap:12px; width:320px; max-width:100%; padding:12px 18px; background:#fff; border:1px solid var(--line); border-radius:30px; font-size:14px; color:var(--muted); }
.google-placeholder svg { width:20px; height:20px; }
.creation-controls { position:absolute; z-index:6; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; justify-content:center; width:max-content; max-width:calc(100% - 90px); }
.creation-controls[hidden],.creation-controls [hidden],.generation-status[hidden] { display:none; }
.creation-controls .button { font-size:11px; padding:10px 14px; min-height:35px; white-space:nowrap; box-shadow:0 3px 12px #4338ca20; }
.creation-controls.has-result #create-photo { padding:10px; background:#fffffff0; color:var(--accent); border:1px solid #c7d2fe; }
.creation-controls button:disabled { opacity:.8; cursor:wait; }
.generation-status { position:absolute; z-index:6; bottom:61px; left:12px; right:12px; font-size:11px; text-align:center; padding:9px 12px; border-radius:12px; color:var(--ink); background:#fffffff0; margin:0; line-height:1.5; }
.has-photo .drag-hint { display:none; }
.history-load-more { display:block; margin:20px auto; }
.history-download { color:var(--accent); font-size:11px; padding:10px 6px; }
@media(max-width:680px) { .creation-controls { bottom:13px; max-width:calc(100% - 72px); } .creation-controls .button { font-size:10px; padding:9px 11px; } }
#account-email { overflow-wrap:anywhere; }
.account-balance { font-weight:600; }
#login-status { font-size:12px; line-height:1.6; color:var(--muted); margin:4px 0 0; }
#login-status:empty { display:none; }
@media(max-width:680px) { #viewer-content .comparison { width:min(calc(100vw - 62px),calc((100dvh - 100px) * var(--photo-aspect))); } }

/* Quiet supporting sections below the photo workspace. */
.info-section { padding:66px 40px; }
.section-heading .eyebrow { margin-bottom:13px; font-size:10px; }
.section-heading h2 { font-size:36px; letter-spacing:-1.2px; }
.section-heading>p:not(.eyebrow) { font-size:14px; color:var(--muted); line-height:1.7; margin:14px 0 0; }
.section-heading.centered { text-align:center; }
.how-section { margin-top:54px; border-top:1px solid #c7d2fe; }
.steps-grid { list-style:none; padding:0; margin:34px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.steps-grid li { position:relative; padding-top:20px; border-top:1px solid #c7d2fe; }
.step-number { display:inline-block; color:var(--accent); font-size:12px; font-weight:600; margin-bottom:18px; letter-spacing:1px; }
.steps-grid h3 { margin:0; font-size:19px; letter-spacing:-.4px; font-weight:650; }
.steps-grid p { font-size:13px; line-height:1.8; color:var(--muted); margin:11px 0 17px; max-width:320px; }
.text-link { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:550; color:var(--accent); border:0; padding:0; background:none; }
.text-link .icon { width:14px; height:14px; }
.text-link:hover { color:var(--accent-hover); }
.pricing-section { background:#ffffff55; border:1px solid #d5dcff; border-radius:26px; }
.pricing-grid { max-width:1040px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:32px auto 0; }
.price-card { display:flex; flex-direction:column; background:#ffffffad; border:1px solid #d5dcff; border-radius:19px; padding:28px; }
.featured-plan { background:linear-gradient(150deg,#f1f1ff,#ede9ff); border-color:#bcb4fd; }
.plan-heading { display:flex; align-items:center; gap:10px; }
.plan-heading h3 { margin:0; font-size:19px; letter-spacing:-.4px; }
.plan-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:#e8eaff; color:var(--accent); }
.plan-icon .icon { width:19px; height:19px; }
.plan-icon use[href="#aperture"] { stroke:none; }
.plan-description { color:var(--muted); font-size:12px; line-height:1.6; margin:13px 0 0; }
.plan-price { font-size:31px; font-weight:650; letter-spacing:-1px; margin:24px 0; }
.plan-price span { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:400; letter-spacing:0; }
.plan-features { display:flex; flex-direction:column; gap:13px; list-style:none; padding:22px 0 24px; margin:0 0 auto; border-top:1px solid #d5dcff; }
.plan-features li { display:flex; align-items:center; gap:8px; font-size:12px; color:#475569; }
.plan-features .icon { width:15px; height:15px; color:var(--accent); }
.price-card .button { width:100%; font-size:12px; padding:13px 15px; }
.button-outline { border:1px solid #c7d2fe; color:var(--accent); background:#fff; }
.button-outline:hover { background:#eef2ff; }
.plan-footnote { font-size:10px; color:var(--muted); text-align:center; margin:11px 0 0; }
.faq-section { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:65px; padding-top:82px; padding-bottom:74px; }
.faq-section .text-link { margin-top:22px; }
.faq-list { border-top:1px solid #c7d2fe; }
.faq-list details { border-bottom:1px solid #c7d2fe; }
.faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:20px; list-style:none; cursor:pointer; padding:21px 0; font-size:14px; font-weight:550; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:focus-visible { outline:2px solid var(--focus); outline-offset:4px; border-radius:3px; }
.faq-toggle { width:17px; height:17px; flex-shrink:0; position:relative; color:var(--accent); }
.faq-toggle::before,.faq-toggle::after { content:''; position:absolute; left:2px; right:2px; top:8px; height:1.5px; border-radius:2px; background:currentColor; }
.faq-toggle::after { transform:rotate(90deg); transition:transform .15s; }
.faq-list details[open] .faq-toggle::after { transform:rotate(0); }
.faq-list details p { font-size:13px; line-height:1.8; color:var(--muted); margin:0 30px 21px 0; }
.footer { display:block; margin-top:0; padding:32px 40px 24px; font-size:11px; }
.footer-top { display:flex; justify-content:space-between; align-items:center; gap:25px; }
.footer-brand p { margin:10px 0 0; font-size:12px; }
.footer nav { display:flex; gap:27px; align-items:center; }
.footer button { color:inherit; border:0; background:none; padding:0; font-size:inherit; }
.footer nav a:hover,.footer button:hover { color:var(--accent); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #d5dcff; margin-top:27px; padding-top:19px; font-size:10px; }
.footer-bottom>div { display:flex; gap:22px; }
@media(max-width:1150px) { .info-section { padding-inline:30px; } .faq-section { gap:40px; } .footer { padding-inline:30px; } }
@media(max-width:900px) { .info-section { padding:48px 12px; } .section-heading h2 { font-size:30px; } .steps-grid { gap:24px; } .steps-grid h3 { font-size:16px; } .price-card { padding:23px; } .faq-section { gap:30px; } .footer { padding-inline:12px; } }
@media(max-width:680px) {
  .header nav { display:flex; gap:12px; font-size:10px; margin-left:auto; }
  .header .nav-how { display:none; }
  .header-cta { padding:10px 13px; gap:6px; }
  .header-cta .icon { display:none; }
  .info-section { padding:38px 5px; }
  .section-heading h2 { font-size:28px; letter-spacing:-.7px; }
  .section-heading .eyebrow { font-size:8px; }
  .section-heading>p:not(.eyebrow) { font-size:12px; }
  .how-section { margin-top:36px; }
  .steps-grid { grid-template-columns:1fr; gap:22px; margin-top:25px; }
  .steps-grid li { padding:19px 0 0 38px; }
  .step-number { position:absolute; top:21px; left:0; margin:0; font-size:10px; }
  .steps-grid h3 { font-size:17px; }
  .steps-grid p { margin:8px 0 11px; max-width:none; font-size:12px; }
  .pricing-section { padding:32px 17px; border-radius:19px; }
  .pricing-grid { grid-template-columns:1fr; gap:15px; margin-top:25px; }
  .price-card { padding:24px; border-radius:15px; }
  .plan-price { font-size:28px; margin:20px 0; }
  .faq-section { grid-template-columns:1fr; gap:25px; padding-top:43px; }
  .faq-list summary { font-size:12px; padding:18px 0; }
  .faq-list details p { font-size:12px; }
  .footer { padding:25px 5px 21px; margin-top:0; }
  .footer-top { align-items:flex-start; flex-direction:column; gap:22px; }
  .footer nav { gap:25px; }
  .footer-brand p { font-size:11px; }
  .footer-bottom { margin-top:22px; }
}
@media(max-width:360px) {
  .header { gap:7px; padding-left:11px; }
  .header .brand { font-size:22px; gap:6px; }
  .header .brand-mark { width:23px; height:23px; }
  .header nav { gap:9px; font-size:9px; }
  .header-cta { padding:10px 11px; font-size:10px; }
  .upload-hint { font-size:8px; gap:4px; }
  .paste-shortcut { gap:3px; }
  .paste-shortcut kbd { padding:2px 3px; }
}

/* History appears only when there are recent photos to revisit. */
.history-toggle { position:fixed; z-index:15; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:56px; height:66px; border:1px solid #c7d2fe; border-radius:17px; background:#fffffff2; color:var(--accent); box-shadow:0 6px 25px #4f46e51a; font-size:9px; font-weight:550; }
.history-toggle>.icon { width:23px; height:23px; }
.history-toggle:hover { background:#eef2ff; border-color:#a5b4fc; }
.history-count { position:absolute; top:-6px; right:-5px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:20px; border:2px solid var(--page); background:var(--accent-gradient); color:#fff; font-size:9px; }
.history-panel { position:fixed; inset:12px 12px 12px auto; margin:0; width:360px; max-width:calc(100vw - 24px); height:calc(100dvh - 24px); max-height:none; padding:30px 20px 18px; border-radius:22px; background:#f8f9ff; overflow:hidden; }
.history-panel[open] { display:flex; flex-direction:column; }
.history-panel::backdrop { background:#0f172a38; backdrop-filter:blur(3px); }
.history-panel .dialog-close { right:12px; top:12px; background:#fff; }
.history-heading { padding:13px 3px 22px; }
.history-heading .eyebrow { font-size:8px; letter-spacing:1px; margin-bottom:12px; }
.history-heading h2 { font-size:26px; letter-spacing:-.7px; margin:0; }
.history-heading>p:last-child { color:var(--muted); font-size:12px; line-height:1.6; margin:10px 0 0; }
.history-list { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:4px 3px 10px; }
.history-entry { position:relative; border:1px solid #dbe1ff; border-radius:13px; background:#fff; flex-shrink:0; }
.history-restore { display:flex; align-items:center; gap:13px; width:100%; padding:10px 38px 10px 10px; border:0; border-radius:13px; background:none; color:var(--ink); text-align:left; }
.history-restore:hover { background:#eef2ff; }
.history-restore img { width:66px; height:82px; object-fit:cover; border-radius:8px; background:#e0e7ff; flex-shrink:0; }
.history-restore>span { min-width:0; display:flex; flex-direction:column; gap:7px; }
.history-restore strong { font-size:12px; font-weight:600; }
.history-restore time { font-size:10px; color:var(--muted); }
.history-use { font-size:10px; color:var(--accent); }
.history-delete { position:absolute; top:10px; right:7px; width:27px; height:27px; border:0; border-radius:7px; display:grid; place-items:center; background:none; color:#94a3b8; }
.history-delete .icon { width:15px; height:15px; }
.history-delete:hover { color:#ae344d; background:#fff1f2; }
.history-storage-note { margin:10px 3px 0; border-top:1px solid #dbe1ff; padding-top:14px; font-size:10px; color:var(--muted); flex-shrink:0; }
@media(max-width:900px) { .history-toggle { top:auto; bottom:calc(20px + env(safe-area-inset-bottom)); right:16px; transform:none; } }
@media(max-width:680px) { .history-toggle { width:48px; height:54px; border-radius:14px; right:12px; bottom:calc(16px + env(safe-area-inset-bottom)); font-size:8px; gap:3px; } .history-toggle>.icon { width:20px; height:20px; } }

/* Business headshot copy and supporting content keep the photo workspace compact. */
.hero h1 { font-size:clamp(32px,2.8vw,43px); }
.uses-section { padding-top:0; }
.uses-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:28px; }
.uses-grid h3 { font-size:17px; letter-spacing:-.3px; margin:0 0 10px; }
.uses-grid p { font-size:13px; color:var(--muted); line-height:1.8; margin:0; }
.faq-list details p a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.footer nav { flex-wrap:wrap; justify-content:flex-end; gap:18px 24px; }
@media(max-width:1150px) and (min-width:901px) { .hero h1 { font-size:30px; letter-spacing:-1px; } }
@media(max-width:900px) and (min-width:681px) { .hero h1 { font-size:27px; letter-spacing:-.9px; } }
@media(max-width:680px) { .hero h1 { font-size:clamp(27px,7.75vw,42px); } .uses-grid { grid-template-columns:1fr; gap:23px; margin-top:22px; } .uses-grid p { font-size:12px; } .footer nav { justify-content:flex-start; gap:17px 23px; } }

/* One photo rate, with three simple balance top-ups. */
.pricing-rate { color:var(--accent); }
.price-card { position:relative; }
.topup-name { font-size:15px; font-weight:550; letter-spacing:-.2px; margin:0; color:#475569; }
.topup-badge { position:absolute; right:18px; top:-12px; padding:5px 11px; border:1px solid #c4b5fd; border-radius:20px; color:var(--accent); background:#ede9fe; font-size:10px; font-weight:600; }
.price-card .plan-price { font-size:45px; margin:21px 0; letter-spacing:-1.5px; }
.price-card .plan-price span { margin-top:7px; }
.credit-total { font-size:23px; font-weight:650; letter-spacing:-.6px; }
.credit-total span { font-size:12px; font-weight:400; letter-spacing:0; color:var(--muted); }
.credit-bonus { display:flex; flex-direction:column; gap:5px; min-height:35px; justify-content:center; font-size:11px; color:var(--accent); margin-top:8px; }
.credit-bonus strong { font-size:13px; font-weight:600; }
.credit-bonus small { font-size:10px; }
.credit-bonus.no-bonus { color:var(--muted); }
.price-card .plan-features { margin-top:22px; padding-top:20px; }
.pricing-note { margin:23px 0 0; color:var(--muted); text-align:center; font-size:11px; line-height:1.8; }
.topup-dialog { max-width:480px; }
.topup-dialog h2 { font-size:29px; }
.topup-intro { color:var(--muted); font-size:13px; line-height:1.7; margin:13px 0 24px; }
.topup-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0; margin:0 0 25px; border:0; }
.topup-options label { position:relative; min-width:0; cursor:pointer; }
.topup-options input { position:absolute; width:1px; height:1px; opacity:0; }
.topup-options label>span { display:flex; align-items:center; flex-direction:column; gap:8px; border:1px solid #d5dcff; border-radius:12px; padding:16px 8px; background:#f8faff; }
.topup-options strong { font-size:23px; letter-spacing:-.5px; }
.topup-options small { font-size:11px; color:var(--muted); }
.topup-options input:checked+span { background:#eef2ff; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); color:var(--accent); }
.topup-options input:focus-visible+span { outline:3px solid var(--focus); outline-offset:4px; }
.topup-breakdown { margin:0; font-size:13px; }
.topup-breakdown>div { display:flex; justify-content:space-between; gap:20px; margin:15px 0; }
.topup-breakdown dt { color:var(--muted); }
.topup-breakdown dd { margin:0; font-weight:550; }
#topup-bonus { color:var(--accent); }
.topup-breakdown .topup-total { border-top:1px solid #d5dcff; padding-top:17px; margin-top:20px; }
.topup-total dt { color:var(--ink); font-weight:550; }
.topup-total dd { font-size:20px; color:var(--accent); }
.topup-capacity { font-size:11px; color:var(--muted); text-align:center; background:#f1f4ff; padding:11px; border-radius:9px; margin:17px 0 23px; line-height:1.6; }
.topup-unavailable { width:100%; }
.topup-launch-note { color:var(--muted); font-size:10px; line-height:1.6; text-align:center; margin:12px 0 18px; }
.topup-explore { display:flex; margin-inline:auto; }
@media(max-width:900px) and (min-width:681px) { .pricing-grid { gap:14px; } .price-card { padding:21px 16px; } .plan-features li { font-size:11px; align-items:flex-start; } .credit-total { font-size:21px; } .credit-total span { font-size:10px; } .topup-name { font-size:13px; } }
@media(max-width:680px) { .price-card .plan-price { font-size:39px; } .pricing-grid { gap:23px; } .topup-dialog { padding:30px 23px; } .topup-dialog h2 { font-size:25px; } .topup-options { gap:9px; } .topup-options strong { font-size:21px; } .topup-options small { font-size:10px; } }

/* Bonus credit is explicit; custom amounts follow the same thresholds. */
.custom-topup-entry { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 15px; margin-top:27px; font-size:12px; color:var(--muted); }
.topup-options .custom-option-label { font-size:14px; line-height:28px; }
.custom-topup-fields { margin:-7px 0 22px; }
.custom-topup-fields>label { display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:10px; font-weight:550; }
.custom-topup-fields>label span { color:var(--muted); font-size:10px; font-weight:400; }
.custom-amount-input { display:flex; align-items:center; gap:8px; border:1px solid #c7d2fe; border-radius:10px; padding:11px 13px; background:#f8faff; }
.custom-amount-input>span { color:var(--muted); font-size:18px; }
.custom-amount-input input { width:100%; min-width:0; border:0; background:none; outline:none; font-size:19px; color:var(--ink); }
.custom-amount-input:focus-within { outline:2px solid var(--focus); outline-offset:2px; }
.custom-amount-input:has(input[aria-invalid="true"]) { border-color:#be536a; }
#custom-topup-help { font-size:10px; color:var(--muted); line-height:1.6; margin:9px 0 0; }
#custom-topup-error { font-size:11px; line-height:1.6; color:#ae344d; margin:8px 0 0; }
#custom-topup-error:empty { display:none; }
.topup-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
@media(max-width:680px) { .topup-options { gap:7px; } .topup-options label>span { padding:13px 4px; } .topup-options strong { font-size:20px; } .topup-options small { font-size:9px; } .custom-topup-entry { font-size:11px; } .topup-options .custom-option-label { font-size:12px; line-height:26px; } }

.credit-equation { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.credit-equation>span { font-size:20px; font-weight:550; letter-spacing:-.5px; color:var(--ink); }
.credit-equation>.equation-sign { font-size:16px; font-weight:400; color:var(--muted); }
.credit-equation>.equation-bonus,.credit-equation>strong { color:var(--accent); }
.credit-equation>strong { font-size:23px; font-weight:650; }
@media(max-width:900px) and (min-width:681px) { .credit-equation { gap:4px; } .credit-equation>span { font-size:17px; } .credit-equation>strong { font-size:20px; } .credit-equation>.equation-sign { font-size:13px; } }

/* The equation is the card's only main amount. */
.price-card .plan-price.credit-equation { min-height:57px; margin:21px 0 0; gap:8px; }
.price-card .plan-price.credit-equation>span { display:inline; margin:0; font-size:34px; line-height:1.3; font-weight:650; letter-spacing:-1px; }
.price-card .plan-price.credit-equation>.equation-sign { font-size:23px; font-weight:400; }
.price-card .plan-price.credit-equation>strong { font-size:34px; line-height:1.3; }
@media(max-width:900px) and (min-width:681px) { .price-card .plan-price.credit-equation { gap:4px; } .price-card .plan-price.credit-equation>span,.price-card .plan-price.credit-equation>strong { font-size:22px; } .price-card .plan-price.credit-equation>.equation-sign { font-size:16px; } }
@media(max-width:680px) { .price-card .plan-price.credit-equation>span,.price-card .plan-price.credit-equation>strong { font-size:32px; } }

.price-card .plan-price:not(.credit-equation) { min-height:57px; margin:21px 0 0; font-size:34px; line-height:1.3; }
.price-card .button { height:44px; }


/* Shared navigation keeps the workspace, pricing and reading in one clear row. */
.site-header { position:relative; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; gap:20px; }
.site-header .brand { justify-self:start; }
.site-header .main-nav { display:flex; gap:4px; margin:0; padding:4px; border-radius:24px; background:#eef2ff85; font-size:12px; }
.main-nav a { padding:9px 17px; border-radius:20px; color:#475569; transition:background .15s,color .15s; }
.main-nav a:hover { background:#ffffffb3; }
.main-nav a[aria-current] { background:#fff; color:var(--accent); box-shadow:0 1px 5px #4f46e50d; }
.header-actions { display:flex; align-items:center; gap:8px; justify-self:end; }
.header-cta.is-signed-in { padding:6px 16px 6px 6px; gap:10px; background:#fff; border:1px solid var(--line); color:var(--ink); box-shadow:0 3px 12px #4f46e509; }
.header-cta.is-signed-in:hover { background:#f8f9ff; }
.account-avatar { position:relative; display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--accent-gradient); color:#fff; font-weight:600; font-size:14px; }
.account-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.header-credit { display:flex; flex-direction:column; align-items:flex-start; gap:1px; line-height:1.2; }
.header-credit>span { color:var(--muted); font-size:9px; font-weight:500; }
.header-credit strong { font-size:13px; font-variant-numeric:tabular-nums; }
.header-cta [hidden] { display:none; }
.account-identity { display:flex; align-items:center; gap:14px; margin:0 0 20px; }
.account-profile-avatar { width:48px; height:48px; font-size:20px; }
.account-identity-text { min-width:0; }
.account-identity-text>strong { font-size:17px; }
.account-identity p { margin:5px 0 0; font-size:13px; overflow-wrap:anywhere; }
.account-tabs { display:flex; gap:4px; padding:4px; margin-bottom:20px; border:1px solid #e0e7ff; border-radius:14px; background:#f5f7ff; }
.account-tabs button { flex:1; padding:10px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; }
.account-tabs button[aria-pressed="true"] { color:var(--accent); background:#fff; box-shadow:0 2px 6px #4f46e50d; }
.account-credit-card { padding:24px; border:1px solid #dce2ff; border-radius:18px; background:linear-gradient(135deg,#f4f6ff,#f3edff); }
.account-credit-card>span { display:block; color:var(--muted); font-size:12px; }
.account-credit-card>strong { display:block; margin:7px 0 20px; font-size:40px; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.account-credit-card>p { margin:-8px 0 20px; font-size:12px; line-height:1.5; }
.account-credit-card .button { width:100%; }
.account-logout { margin:22px auto 0; display:block; color:var(--muted); font-size:12px; }
#login-dialog { max-height:calc(100dvh - 32px); overflow:auto; }
.billing-status { font-size:13px; line-height:1.6; }
.billing-status:empty { display:none; }
.billing-list { padding:0; margin:0; list-style:none; }
.billing-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:17px 0; border-bottom:1px solid #e8ecfa; }
.billing-row>div:first-child { min-width:0; }
.billing-row strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.billing-row time,.billing-row small { display:block; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.5; }
.billing-amount { text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }
.billing-amount .billing-credit { color:var(--accent); }
.billing-more { width:100%; margin-top:20px; }
.billing-more[hidden] { display:none; }
.nav-toggle { display:none; width:34px; height:34px; padding:0; place-items:center; border:1px solid #d5dcff; border-radius:50%; color:var(--accent); background:#ffffff9c; }
.nav-toggle .icon { width:18px; height:18px; }

/* Format selection remains in the original fixed-height upload box. */
.ratio-control { position:absolute; z-index:3; right:10px; bottom:9px; display:flex; align-items:center; gap:3px; padding:4px; background:#fffffff2; border:1px solid #d5dcff; border-radius:20px; box-shadow:0 1px 4px #4f46e509; }
.ratio-control button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:43px; height:27px; padding:0 8px; border:0; border-radius:15px; background:transparent; color:#64748b; font-size:10px; font-weight:500; transition:background .15s,color .15s; }
.ratio-control button:hover { background:#eef2ff; color:var(--accent); }
.ratio-control button[aria-pressed="true"] { background:var(--accent-gradient); color:#fff; box-shadow:0 2px 6px #4f46e51a; }
.ratio-control button:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.ratio-shape { display:inline-block; border:1px solid currentColor; border-radius:2px; flex-shrink:0; }
.ratio-shape.square { width:10px; height:10px; }
.ratio-shape.landscape { width:12px; height:8px; }
.ratio-shape.portrait { width:8px; height:12px; }
.upload-empty { transform:translateY(-19px); }
.upload-error { bottom:43px; }
@media(max-width:900px) and (min-width:681px) {
  .site-header { gap:10px; }
  .site-header .main-nav { font-size:11px; }
  .main-nav a { padding:8px 12px; }
  .upload-empty { gap:6px; }
  .upload-icon { width:28px; height:28px; margin-bottom:0; }
  .upload-hint { margin-top:0; }
}
@media(max-width:680px) {
  .site-header { display:flex; justify-content:space-between; gap:10px; }
  .header-actions { margin-left:auto; }
  .nav-toggle { display:grid; }
  .site-header .main-nav { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; padding:8px; flex-direction:column; align-items:stretch; gap:3px; background:#f8f9ff; border:1px solid #d5dcff; border-radius:18px; box-shadow:0 12px 32px #4f46e518; font-size:13px; }
  .site-header.nav-open .main-nav { display:flex; }
  .main-nav a { padding:13px 16px; border-radius:12px; }
  .upload-empty { gap:7px; }
  .upload-icon { margin-bottom:0; }
  .ratio-control { bottom:7px; right:8px; }
}
@media(max-width:1150px) and (min-width:901px) {
  .portrait-frame { width:min(100%,calc(100cqh * var(--photo-aspect))); height:min(100%,calc(100cqw / var(--photo-aspect))); }
}
@media(max-width:1150px) and (min-width:901px) {
  .upload-empty { gap:6px; }
  .upload-icon { margin-bottom:0; }
}

.ratio-shape.portrait-four-five { width:10px; height:12.5px; }
.ratio-shape.portrait-three-four { width:9px; height:12px; }
@media(max-width:360px) {
  .ratio-control { gap:2px; padding:3px; }
  .ratio-control button { font-size:9px; min-width:35px; gap:4px; padding-inline:6px; }
}

/* Keep account space stable until the server confirms the session. */
.header-cta{width:134px;min-width:134px;height:46px;justify-content:center}
.header-account-placeholder{display:none;align-items:center;gap:10px}
.header-cta.is-auth-pending{padding:6px 12px;background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:none}
.header-cta.is-auth-pending>:not(.header-account-placeholder){display:none!important}
.header-cta.is-auth-pending .header-account-placeholder{display:flex}
.header-account-placeholder i:first-child{width:32px;height:32px;border-radius:50%}
.header-account-placeholder i:last-child{width:44px;height:14px;border-radius:5px}
.loading-block,.header-account-placeholder i,.is-loading{background:#e7e8f6;border-radius:6px}
.is-loading{color:transparent!important;display:inline-block;min-width:44px;user-select:none}
#account-balance.is-loading{width:180px}
.account-loading{min-height:270px;display:flex;flex-direction:column;gap:20px;padding:12px 0}
.account-loading .loading-block{display:block;height:24px;width:60%}
.account-loading .loading-block:nth-child(2){width:85%;height:18px}
.account-loading .loading-block:last-child{width:100%;height:170px;border-radius:20px}
.billing-list.is-loading{min-height:220px;display:flex;flex-direction:column;gap:16px}
.billing-list .loading-block{height:56px;list-style:none}
#account-billing{min-height:260px}
@media(max-width:600px){.header-cta{width:114px;min-width:114px}}