@import url("/brand.css");
/* Shared product theme, matched to the landing page. */
@import url("/palette.css");
@import url("/skeleton.css");
@import url("/model-loader.css");
:root{font-family:Arial,Helvetica,sans-serif;color:var(--st-ink);background:var(--st-bg);color-scheme:light;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;color:var(--st-ink);background:var(--st-bg)}
button,input,select,textarea{font-family:inherit;accent-color:var(--st-focus)}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.7px;color:var(--st-ink)}
h1{font-size:clamp(30px,4vw,42px);line-height:1.15}h2{line-height:1.25}
p,.note,label,dt,.updated,header span{color:var(--st-muted)}
a{color:var(--st-focus)}a:hover{color:#51447f}
button,.button,.choose,.heads-link,.account-trigger,body[data-mode=demo] .demo-create{border:1px solid var(--st-line);border-radius:var(--st-button-radius);background:var(--st-button-fill);color:var(--st-button-ink);font-weight:var(--st-button-weight);min-height:44px;padding:11px 18px;box-shadow:var(--st-button-shadow);transition:background .15s,border-color .15s,box-shadow .15s}
button:hover,.button:hover,.choose:hover,.heads-link:hover,.account-trigger:hover{background:var(--st-button-hover);border-color:transparent;color:var(--st-button-ink)}
button:disabled{opacity:.48;cursor:default}
.primary,.account-dialog .account-primary,#restore-yes,body[data-mode=demo] .demo-create,body:has(#email-form) button:not(.secondary){background:var(--st-button-fill);color:var(--st-button-ink);border:1px solid transparent;box-shadow:var(--st-button-shadow)}
.primary:hover,.account-dialog .account-primary:hover,#restore-yes:hover,body[data-mode=demo] .demo-create:hover,body:has(#email-form) button:not(.secondary):hover{background:var(--st-button-hover);color:var(--st-button-ink)}
:is(button,input,select,summary,a,.choose):focus-visible{outline:3px solid var(--st-focus);outline-offset:3px}
input:not([type=file]):not([type=range]):not([type=color]),input[type=text],#head-name,select,.account-dialog input{background:var(--st-surface);border:1px solid #b9adc9;color:var(--st-ink);border-radius:12px;min-height:46px;padding:12px 14px;font-size:16px;font-weight:400}
input::placeholder{color:#7a7187}input[type=color]{background:var(--st-surface);border:1px solid var(--st-line);border-radius:10px}
header{background:var(--st-bg);color:var(--st-ink);border-bottom:1px solid var(--st-line)}header a{color:var(--st-ink)}
.viewer-brand,header strong,.brand,body:has(.updated) header a{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1px}
header strong{font-size:25px}.viewer-brand{font-size:27px}
.heads-link,.account-trigger{font-size:12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
#hairstyle{background:var(--st-surface);border-radius:24px;border-color:var(--st-line);font-size:14px;min-height:44px;padding:10px 32px 10px 16px}
/* Keep the viewer background independent of control styling. */
#stage{background:var(--st-viewer-background)}
#loading{background:#fffdfbf2;color:var(--st-ink);border:1px solid var(--st-line);border-radius:18px;box-shadow:var(--st-shadow)}
/* Preserve the interactive viewer's gray controls independently of marketing buttons. */
body:has(#stage):not([data-mode=hero]){
 --st-button-fill:#e1e3e5;--st-button-hover:#cdd1d5;--st-button-ink:#272c32;
 --st-button-radius:12px;--st-button-shadow:none;
 --st-focus:#607080;--st-line:#c8cdd2;--st-soft:#edf0f2;--st-muted:#626a73;
}
body:has(#stage):not([data-mode=hero]) :is(select,input:not([type=range])){border-color:var(--st-line)}
.tool:hover{color:#f1f4fa}
:is(#clipper-menu,#grab-menu){background:#30343af5;color:#f1f4fa;border-color:#a5adb7;border-radius:10px;box-shadow:0 3px 10px #0003}
:is(#clipper-menu,#grab-menu) input{accent-color:#aab6c4}
:is(#clipper-done,#grab-done),:is(#clipper-size,#grab-size){background:#444b54;color:#f1f4fa;border-color:#a5adb7;border-radius:10px}
:is(#clipper-done,#grab-done):hover,:is(#clipper-size,#grab-size):hover{background:#59626d;color:white}
/* Dialogs, account, billing and sign-in. */
dialog,.account-dialog{background:var(--st-surface);color:var(--st-ink);border:1px solid var(--st-line);border-radius:22px;box-shadow:0 24px 100px #30213c33;font-family:Arial,Helvetica,sans-serif}
dialog::backdrop,.account-dialog::backdrop{background:#33263d66;backdrop-filter:blur(5px)}
dialog h2,.account-heading h2{font-family:Georgia,'Times New Roman',serif;font-size:28px;font-weight:400;letter-spacing:-.7px}
.drawer-heading,details,.account-content details{border-color:var(--st-line)}
.account-dialog p,.account-dialog label,.account-dialog summary{color:var(--st-muted);line-height:1.6}
.account-dialog button{border:1px solid transparent;border-radius:var(--st-button-radius);background:var(--st-button-fill);color:var(--st-button-ink);font-weight:var(--st-button-weight);font-size:14px;padding:11px 16px;min-height:44px}
.account-dialog button:hover{background:var(--st-button-hover)}.account-dialog .account-close:hover{background:var(--st-soft)}
.account-dialog .account-close,.drawer-heading button{width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--st-muted);border-radius:50%;flex-shrink:0}
.account-dialog .account-danger{color:var(--st-danger);border-color:#dfb9c3;background:#fff7f8}
.account-dialog .account-message,#photo-error,#page-error{color:var(--st-danger)}
.account-privacy{color:var(--st-focus)}
.auth-callback{background:var(--st-surface);color:var(--st-ink);border:1px solid var(--st-line);box-shadow:var(--st-shadow);border-radius:22px;font-family:Arial,Helvetica,sans-serif;width:min(440px,calc(100% - 32px));padding:28px}
.auth-callback a{color:var(--st-focus)}
body:has(#email-form){background:radial-gradient(ellipse at 65% 38%,#f0eaf8a0,transparent 65%),var(--st-bg)}
body:has(#email-form)>main{background:var(--st-surface);border:1px solid var(--st-line);box-shadow:var(--st-shadow)}
body:has(#email-form) .brand{font-size:32px;color:var(--st-ink)}
body:has(#email-form) h1{font-size:36px;font-weight:400;margin-top:28px}
body:has(#email-form) .secondary{background:var(--st-button-fill);color:var(--st-button-ink);border:1px solid transparent}
body:has(#email-form) aside{border-color:var(--st-line);color:var(--st-muted)}
body:has(#email-form) input:focus{outline:3px solid var(--st-focus)}
/* Head library, uploads and generation progress. */
.head-card{background:var(--st-surface);border-color:var(--st-line);border-radius:18px;padding:18px;box-shadow:0 3px 16px #55446908}
.head-card h2{font-size:24px;font-weight:400}.head-card .card-image{border-radius:12px;background:var(--st-soft)}
.membership-panel{background:var(--st-soft);border:1px solid var(--st-line);border-radius:18px;padding:24px}.membership-panel h2{font-size:28px;font-weight:400}
.membership-panel button{color:var(--st-button-ink)}
.guide{border-color:var(--st-line);border-radius:14px}.choose{background:var(--st-button-fill);color:var(--st-button-ink);border-color:transparent}
.photo-state{color:var(--st-muted)}.photo-slot:focus-within .choose{outline-color:var(--st-focus)}
.tip{background:var(--st-soft);color:var(--st-muted);border:1px solid var(--st-line);border-radius:14px;padding:16px}
.progress-content h1{font-size:32px;font-weight:400}.progress-bar{background:#e5dfee}.progress-bar span{background:linear-gradient(110deg,#9a88c6,#b5a5db)}
.name-label{color:var(--st-ink)}
/* Privacy content shares the same surfaces and readable text palette. */
body:has(.updated) aside{background:var(--st-soft);border-color:var(--st-accent);color:var(--st-muted)}
body:has(.updated) footer{border-color:var(--st-line)}
@media(max-width:550px){.viewer-brand{font-size:24px}header strong{font-size:22px}.head-card{padding:13px;gap:12px}.head-card h2{font-size:22px}.membership-panel{padding:20px}.account-dialog{padding:20px}.account-heading h2{font-size:26px}.page-heading h1{font-size:30px}.page-heading button{font-size:12px;padding:10px 14px}.account-trigger,.heads-link{padding:9px 12px}.progress-content h1{font-size:29px}body:has(#email-form){padding:18px}body:has(#email-form)>main{padding:25px}body:has(#email-form) h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){button,.button,.choose,.heads-link,.account-trigger{transition:none}}

body[data-mode=demo] .demo-create{text-decoration:none}
body:has(#library)>header{display:flex;justify-content:space-between;gap:12px}body:has(#library) .header-actions{display:flex;align-items:center;gap:8px}body:has(#library) .viewer-brand{font-size:27px}body:has(#library) .heads-link{font-size:12px}