:root{font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:#30312d;background:#faf9f5}*{box-sizing:border-box}body{margin:0;background:#faf9f5}header{max-width:1240px;margin:auto;padding:25px 32px;display:flex;justify-content:space-between;align-items:center}a{color:inherit;text-decoration:none}.brand{display:flex;gap:9px;align-items:center;font-weight:800;letter-spacing:2px}nav{display:flex;gap:24px;font-size:13px}main{max-width:1180px;margin:auto;padding:20px 28px 45px}.intro{text-align:center;margin:10px 0 35px}.eyebrow{font-size:11px;letter-spacing:3px;color:#8b6c54;font-weight:700}.intro h1{font-size:44px;letter-spacing:3px;margin:12px 0}.intro h1 span{color:#e6a04c;margin-left:10px}.intro p{color:#77766f;margin:10px 0 18px}.privacy{font-size:12px;background:#e9efe6;color:#4f7356;padding:7px 13px;border-radius:30px}.studio{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:26px;align-items:start}.booth{background:#fff;border:1px solid #e3dfd5;padding:18px;border-radius:20px;box-shadow:0 12px 35px #473f2910}.booth-top{display:flex;justify-content:space-between;padding:0 2px 14px;font-size:10px;letter-spacing:2px;color:#858278}.view{position:relative;background:#e9e6df;border-radius:12px;overflow:hidden;aspect-ratio:4/3}.view canvas{width:100%;height:100%;display:block}#welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#fff7e8,#eae7df);text-align:center}#welcome[hidden]{display:none}.welcome-icon{font-size:70px;color:#c28b53}#welcome h2{font-size:20px;margin:8px}#welcome p{font-size:13px;color:#8a8176}#countdown{position:absolute;inset:0;display:grid;place-content:center;font-size:90px;font-weight:800;color:white;text-shadow:0 2px 20px #0008;pointer-events:none}#flash{position:absolute;inset:0;background:white;pointer-events:none;animation:flash .3s forwards}@keyframes flash{to{opacity:0}}button,.upload,.download{font:inherit;font-size:13px;border:1px solid #dedbd2;border-radius:9px;padding:11px 14px;background:#fff;color:#44453f;cursor:pointer}button:hover:not(:disabled),.upload:hover{border-color:#9b987b;background:#f6f5ec}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d99b56;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:#454f3e;color:white;border-color:#454f3e}.primary:hover:not(:disabled){background:#59654f;color:white}.camera-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:15px}.camera-controls label{margin-left:auto;font-size:12px}#status{font-size:12px;color:#77796d;min-height:36px;line-height:1.6;margin:12px 0}.shutter-row{border-top:1px dashed #e1ded6;padding-top:16px;display:flex;gap:10px}.shutter-row button{flex:1;font-weight:600}.shutter-row small{display:block;font-size:10px;font-weight:400;opacity:.7;margin-top:4px}.effects{padding:5px 0}.effects-heading{display:flex;justify-content:space-between;align-items:center}.effects h2,.results h2{font-size:20px;margin:0 0 18px}.text-button{background:none;border:0;color:#7d7e72;padding:0 0 18px}fieldset{border:0;padding:18px 0 22px;margin:0;border-top:1px solid #e4e0d7}legend{font-size:14px;font-weight:650;padding-right:15px}legend span{color:#a0a28e;font-size:10px;margin-right:9px}.choices{display:flex;gap:8px;flex-wrap:wrap}.choices button{padding:10px 12px;font-size:12px}.choices button[aria-pressed=true]{background:#edf0e5;border-color:#7c8b67;color:#405133}.upload{display:block;text-align:center;border-style:dashed;margin-top:10px;font-size:12px;position:relative;overflow:hidden}.upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.upload:focus-within{outline:3px solid #d99b56}.hint{font-size:11px;color:#8e8b80;line-height:1.6;margin:10px 0 0}.tip{font-size:12px;line-height:1.9;background:#f0ece1;padding:17px;border-radius:10px;color:#81745a}.results{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:#f0eee7;border-radius:16px;padding:28px;margin-top:30px}.results h2{margin-top:10px}.results p,.local-note{font-size:12px;color:#838276;line-height:1.9}.photo-result{border:1px dashed #cec9ba;min-height:140px;border-radius:10px;display:grid;place-items:center;padding:12px;color:#a39a86;font-size:12px}.photo-result img{max-width:100%;max-height:420px;object-fit:contain}.download{display:inline-block;margin-top:12px}.download[hidden]{display:none}.local-note{text-align:center;margin:24px auto 0;max-width:760px}footer{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-size:12px;padding:24px;color:#898778;border-top:1px solid #e5e2d9}[hidden]{display:none!important}@media(max-width:760px){header{padding:18px}nav{gap:14px;font-size:11px}main{padding:10px 16px 25px}.intro h1{font-size:34px}.studio{grid-template-columns:1fr}.effects{padding:12px 5px}.results{grid-template-columns:1fr;padding:20px}.booth{padding:12px}.camera-controls label{margin-left:0}.intro{margin-bottom:24px}}

.model-loading{background:#f0f3e9;border:1px solid #d8dfca;border-radius:10px;padding:12px 14px;margin:0 0 16px}.model-loading>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.model-loading strong{font-size:12px;color:#48543c}.model-loading button{padding:5px 9px;font-size:11px;background:transparent}.model-loading progress{display:block;width:100%;height:9px;margin:10px 0;accent-color:#63774b}.model-loading small{font-size:11px;color:#7b826e}

.photo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}.photo-actions .download{margin-top:0}

/* Keep camera, effects and photo actions together in the desktop workspace. */
@media(min-width:1100px){
 header{padding-block:14px}
 main{padding-top:4px}
 .intro{margin:0 0 18px;display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;gap:4px 24px}
 .intro .eyebrow{grid-column:1}
 .intro h1{grid-column:1;grid-row:2;font-size:34px;margin:0;line-height:1.3}
 .intro p{grid-column:1;grid-row:3;margin:0;font-size:13px}
 .intro .privacy{grid-column:2;grid-row:1 / span 3}
 .studio{grid-template-columns:minmax(0,1.65fr) minmax(380px,1fr);gap:14px 24px}
 .booth{grid-column:1;grid-row:1 / span 2;padding:14px}
 .booth-top{padding-bottom:10px}
 .camera-controls{margin-top:10px}
 #status{margin:8px 0;min-height:20px}
 .shutter-row{padding-top:10px}
 .effects{grid-column:2;grid-row:1;padding:0}
 .effects h2{font-size:18px;margin-bottom:10px}
 .effects .text-button{padding-bottom:10px}
 .effects fieldset{padding:10px 0 12px}
 .effects .choices{gap:6px}
 .effects .choices button{padding:8px 10px}
 .effects .upload{margin-top:8px;padding:8px}
 .effects .hint{margin-top:6px}
 .effects .tip{padding:10px 12px;line-height:1.6}
 .photo-results{grid-column:2;grid-row:2;margin:0;padding:14px;gap:12px;grid-template-columns:minmax(0,1fr) 112px;align-items:center}
 .photo-results h2{font-size:17px;margin:5px 0}
 .photo-results p{margin:6px 0;line-height:1.6}
 .photo-results .eyebrow{font-size:9px;letter-spacing:2px}
 .photo-results .photo-result{min-height:112px;padding:6px}
 .photo-results .photo-result img{max-height:140px}
 .photo-results .photo-actions{gap:6px;margin-top:8px}
 .photo-results .photo-actions>a,.photo-results .photo-actions>button{font-size:12px;padding:8px 10px}
}
@media(min-width:761px) and (max-width:1099px){.photo-results{grid-column:1/-1}}
.intro .guide-return{margin:8px 0;font-size:13px;line-height:1.6}.intro .guide-return a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.status-help{display:inline-block;margin-inline-start:6px;color:inherit;text-decoration:underline;text-underline-offset:3px}