:root{color-scheme:light;--bg:#f7f6f3;--paper:#fff;--ink:#292622;--muted:#77736e;--line:#e9e6e1;--rust:#a95f39;--ring:#ae7f5b}
*{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink)}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #aa744d;outline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.topbar{padding:0 max(24px,calc((100vw - 1260px)/2));height:60px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.backlink{font-weight:650;text-decoration:none;font-size:13px}.top-credit{font-size:12px;color:var(--muted)}.app-shell{max-width:1260px;margin:0 auto;padding:50px 24px 28px}.intro{max-width:750px;margin-bottom:28px}.eyebrow,.step{color:var(--rust);font-size:11px;line-height:1.4;letter-spacing:.14em;font-weight:700}.intro h1{font-weight:650;font-size:clamp(40px,5.4vw,65px);letter-spacing:-.062em;line-height:1.06;margin:12px 0 15px}.intro h1 em{font-style:normal;color:var(--rust)}.intro p{color:var(--muted);font-size:16px;line-height:1.65;margin:0}
.studio-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);grid-template-areas:"design preview" "details preview";align-items:start;column-gap:24px;row-gap:22px}.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 10px 32px #241e1608;min-width:0}.design-panel{grid-area:design}.details-panel{grid-area:details}.preview-panel{grid-area:preview;position:sticky;top:18px}.panel-head{margin-bottom:20px}.panel-head h2{font-size:26px;line-height:1.15;letter-spacing:-.05em;font-weight:650;margin:7px 0}.panel-head p{font-size:13px;color:var(--muted);line-height:1.55;margin:7px 0 0}.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.template-card{border:1px solid #e4e0da;border-radius:13px;background:#fff;padding:7px 7px 12px;text-align:left;min-width:0;transition:transform .18s,border-color .18s,box-shadow .18s}.template-card:hover{transform:translateY(-2px)}.template-card.is-selected{border-color:#a66d4a;box-shadow:0 0 0 2px #b78b651f}.thumb-shell{display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;background:#f7f2e9}.thumb-shell img{display:block;width:100%;height:100%;object-fit:cover}.selected-check{position:absolute;right:8px;top:8px;width:25px;height:25px;background:#fff;border:1px solid #ddd;border-radius:50%;display:none;place-items:center;font-size:14px;color:#66442c}.is-selected .selected-check{display:grid}.template-card strong{display:block;padding:9px 3px 0;font-size:13px;line-height:1.4}.template-card small{display:block;padding:2px 3px 0;color:var(--muted);font-size:11px;line-height:1.4}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.pill{font-size:11px;white-space:nowrap;padding:7px 10px;border:1px solid #e7e1da;border-radius:40px;color:#82786c}.canvas-shell{width:100%;position:relative;aspect-ratio:1;background:#f7f2ec;border-radius:14px;overflow:hidden;isolation:isolate;border:1px solid #e4d9cf;user-select:none}.canvas-shell canvas,.canvas-shell .static-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}.canvas-shell canvas{opacity:0;transition:opacity .16s;touch-action:pan-y}.canvas-shell.ready canvas{opacity:1}.canvas-shell.ready .static-preview{visibility:hidden}.canvas-shell.is-dragging canvas{cursor:grabbing;touch-action:none}.preview-helper{color:#6e665e;font-size:12px;line-height:1.5;min-height:18px;margin:14px 0}.retry{background:#fff;border:1px solid #d1c2b2;padding:10px;border-radius:9px;font-size:12px}.ticket-action{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;border:1px solid #e9e0d6;border-radius:13px;padding:13px 15px;background:#fcfaf7;transition:background .2s}.ticket-action:hover{background:#f8f2e9}.ticket-action span:first-child{display:flex;flex-direction:column;gap:5px}.ticket-action small{font-size:10px;color:#927358;letter-spacing:.10em;font-weight:700}.ticket-action strong{font-size:21px;line-height:1.1}.ticket-action span:last-child{font-size:13px;font-weight:650}.poster-note{font-size:11px;color:#857f78;line-height:1.5;margin:12px 0 0}
.field{margin-bottom:20px}.field>label:first-child{display:flex;justify-content:space-between;font-size:13px;font-weight:650;margin-bottom:9px}.field small{font-size:11px;line-height:1.5;color:var(--muted);display:block;margin-top:7px}.field input[type=text]{font-size:16px;width:100%;border:1px solid #dedad5;border-radius:10px;padding:13px 14px;background:#fff}.upload-zone{display:flex!important;align-items:center;flex-direction:column;text-align:center;gap:8px;justify-content:center;border:1.5px dashed #d7c9bb;background:#fbfaf8;border-radius:12px;padding:19px 10px;cursor:pointer}.upload-zone:hover,.upload-zone.is-dragging{border-color:#a56b44;background:#faf3ec}.upload-zone .upload-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid #d5c9bd;font-size:25px;line-height:1;font-weight:300}.upload-zone strong{font-size:13px}.upload-zone small{margin:0}.file-feedback{font-size:12px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}.file-feedback.error{color:#ad2d24}.photo-adjust input[type=range]{width:100%;accent-color:#ab6941}.photo-adjust input[type=range]:disabled{opacity:.3}.small-action{margin-top:5px;border:0;padding:4px 0;color:var(--rust);text-decoration:underline;background:transparent;font-size:12px}.small-action:disabled{opacity:.4}.consent{display:flex;gap:10px;font-size:12px;line-height:1.5;color:#49433f;align-items:flex-start}.consent input{flex:none;accent-color:#a76742;width:17px;height:17px;margin:2px 0 0}.privacy{color:#827b74;font-size:11px;line-height:1.5}.download,.share{width:100%;display:flex;justify-content:space-between;align-items:center;border-radius:12px;border:0;padding:15px 17px;font-weight:650;font-size:14px;margin-top:12px}.download{background:#302820;color:#fff}.download:hover:not(:disabled){background:#4b382a}.share{background:#f6f2ec;color:#3f362f}.share:hover:not(:disabled){background:#ebe3d8}.download:disabled,.share:disabled{opacity:.42}
footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;padding-top:23px;margin-top:30px;font-size:10px;color:#817b75;letter-spacing:.045em}
.is-embedded .topbar,.is-embedded footer{display:none}.is-embedded .app-shell{padding:17px 13px 22px}.is-embedded .intro{margin-bottom:22px}.is-embedded .intro h1{font-size:clamp(34px,5vw,49px)}.is-embedded .panel{box-shadow:none}
@media(max-width:900px){.studio-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"design" "preview" "details";row-gap:16px}.preview-panel{position:static}.app-shell{padding:33px 15px 23px}.panel{padding:18px;border-radius:18px}.intro{margin-bottom:22px}.intro h1{font-size:clamp(39px,7vw,56px)}.template-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.template-card strong{font-size:12px}.template-card small{font-size:10px}}
@media(max-width:620px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell{padding:26px 10px 18px}.intro{padding:0 5px}.intro h1{font-size:40px}.intro p{font-size:14px}.panel{padding:15px;border-radius:16px}.panel-head h2{font-size:24px}.preview-head{margin-bottom:13px}.topbar{padding:0 15px}.top-credit{font-size:11px}.template-grid{gap:9px}.ticket-action strong{font-size:19px}footer{flex-direction:column;gap:7px;font-size:9px}.is-embedded .app-shell{padding:10px 6px 16px}.is-embedded .intro{padding:0 6px}.is-embedded .panel{padding:13px}}
@media(prefers-reduced-motion:reduce){.template-card,.canvas-shell canvas,.ticket-action{transition:none}.template-card:hover{transform:none}}
/* V1.8: one small mobile-first journey — details, four personalized designs, download. */
.studio-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-areas:"details design" ". preview";align-items:start;gap:22px}
.details-panel{grid-area:details}
.design-panel{grid-area:design}
.preview-panel{grid-area:preview;position:static}
.progress-steps{display:flex;gap:8px;flex-wrap:wrap;margin:23px 0 0}
.progress-steps span{border-radius:50px;padding:8px 11px;border:1px solid #e6ded3;color:#756e66;background:#ffffff;font-size:11px;font-weight:650}
.progress-steps .progress-current{background:#312820;color:#fff;border-color:#312820}
.intro{max-width:820px;margin-bottom:29px}
.intro h1{font-size:clamp(39px,5vw,58px)}
.intro p{max-width:620px}
.panel-head h2{font-size:25px}
.reveal-posters{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:19px;border:0;border-radius:13px;background:#302820;color:#fff;padding:15px 17px;font-size:14px;font-weight:650;min-height:50px}
.reveal-posters:disabled{background:#eeeae5;color:#978e84;opacity:1}
.gallery-placeholder{min-height:300px;border:1px dashed #d8c9b9;border-radius:17px;background:linear-gradient(145deg,#fcfaf7,#f7f1e9);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:35px 22px}
.gallery-placeholder .placeholder-sparkle{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;color:#b07b54;font-size:33px;background:#fff;box-shadow:0 7px 24px #4430220d;margin-bottom:18px}
.gallery-placeholder strong{font-size:20px;letter-spacing:-.04em}
.gallery-placeholder p{max-width:280px;color:#7c7168;line-height:1.6;font-size:13px;margin:8px 0 0}
.personalized-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.poster-choice{background:#fff;border:1px solid #e7e2da;border-radius:16px;padding:9px;min-width:0;box-shadow:0 5px 20px #35251905;display:flex;flex-direction:column}
.poster-choice .template-card{border:0;border-radius:11px;box-shadow:none;padding:0;text-align:left;min-width:0;display:block;background:transparent;width:100%;flex:1}
.poster-choice .template-card.is-selected{box-shadow:none}
.poster-choice:has(.template-card.is-selected){border-color:#a66d4a;box-shadow:0 0 0 2px #a66d4a18}
.poster-choice .thumb-shell{border-radius:10px;background:#ede8e1;overflow:hidden;isolation:isolate}
.poster-choice .thumb-shell canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .14s}
.poster-choice .thumb-shell.is-personalized canvas{opacity:1}
.poster-choice .selected-check{display:grid;opacity:0;transition:opacity .14s}
.poster-choice .is-selected .selected-check{opacity:1}
.poster-choice .template-card strong{padding:11px 5px 0;font-size:14px;line-height:1.25}
.poster-choice .template-card small{padding:3px 5px 7px;font-size:11px}
.choice-download{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:0;border-radius:10px;background:#302820;color:#fff;padding:11px 9px;font-size:12px;font-weight:650;min-height:44px;margin-top:6px}
.choice-download:hover:not(:disabled){background:#4d392d}
.choice-download:disabled{background:#ebe7e1;color:#9d948b;opacity:1}
.gallery-helper{font-size:12px;line-height:1.55;color:#746d65;margin:13px 0 0}
.gallery-helper:empty{display:none}
#selected-preview-section{scroll-margin-top:12px}
#designs-section{scroll-margin-top:12px}
#personalized-gallery[hidden],#gallery-placeholder[hidden],#selected-preview-section[hidden],#photo-adjuster[hidden]{display:none!important}
.preview-panel .ticket-action{margin-top:19px}
.photo-adjust{padding-top:17px;border-top:1px solid #ece9e3;margin-top:18px}
.details-panel .consent{padding-top:3px}
.canvas-shell{max-width:660px;margin:auto}
@media(max-width:900px){
 .studio-grid{grid-template-columns:1fr;grid-template-areas:"details" "design" "preview";gap:17px}
 .personalized-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .panel{padding:23px}
}
@media(max-width:620px){
 html,body{max-width:100%;overflow-x:clip}
 .app-shell{padding:23px 12px 20px}
 .intro{margin-bottom:21px;padding:0 4px}
 .intro h1{font-size:clamp(35px,9.5vw,44px);margin:10px 0 10px}
 .intro p{font-size:14px;line-height:1.6}
 .progress-steps{gap:5px;margin-top:17px}
 .progress-steps span{padding:7px 9px;font-size:10px}
 .panel{padding:19px 16px;border-radius:20px}
 .panel-head{margin-bottom:17px}
 .panel-head h2{font-size:26px;letter-spacing:-.045em}
 .field{margin-bottom:18px}
 .field input[type=text]{padding:15px 14px;min-height:52px}
 .upload-zone{min-height:138px;gap:8px}
 .gallery-placeholder{min-height:228px;padding:28px 20px}
 .personalized-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .poster-choice{padding:6px;border-radius:14px}
 .poster-choice .thumb-shell{border-radius:9px}
 .poster-choice .template-card strong{font-size:12px;padding:8px 3px 0;letter-spacing:-.02em}
 .poster-choice .template-card small{font-size:10px;min-height:17px;padding:1px 3px 4px}
 .choice-download{font-size:11px;padding:9px 5px;min-height:44px;border-radius:9px}
 .preview-panel .canvas-shell{margin:0 auto}
 .ticket-action{flex-wrap:wrap}
 .topbar{height:53px}
 .is-embedded .panel{padding:16px 13px}
 .is-embedded .app-shell{padding:14px 9px 19px}
 .is-embedded .progress-steps span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.poster-choice .thumb-shell canvas,.poster-choice .selected-check{transition:none}}

/* V1.9 guided, accessible, touch-first photo cropping. */
.photo-edit-entry[hidden],.photo-editor[hidden],.inline-edit-photo[hidden]{display:none!important}
.photo-edit-entry{margin:12px 0 18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:11px;padding:14px;border:1px solid #e5dcd2;background:#fcfaf7;border-radius:14px}
.photo-edit-entry div{flex:1 1 175px}.photo-edit-entry strong,.photo-edit-entry small{display:block}.photo-edit-entry strong{font-size:13px;font-weight:700}.photo-edit-entry small{font-size:11px;line-height:1.5;color:#7a7067;margin-top:4px}
.edit-photo-btn,.inline-edit-photo{border:1px solid #c9b29f;background:#fff9f3;color:#70432b;border-radius:10px;min-height:44px;padding:11px 14px;font-size:13px;font-weight:700;white-space:normal;text-align:center}
.edit-photo-btn:hover,.inline-edit-photo:hover{background:#f8ecdd}
.inline-edit-photo{margin-top:13px;width:100%;min-height:45px}
.photo-editor{margin:15px 0 20px;border:1px solid #dfd2c4;border-radius:17px;padding:17px;background:#fbf8f4;scroll-margin-top:16px}
.photo-editor-heading{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.photo-editor h3{font-size:21px;letter-spacing:-.04em;line-height:1.2;margin:6px 0 7px;font-weight:700}
.photo-editor-heading p{font-size:12px;color:#746a60;line-height:1.55;margin:0 0 13px;max-width:290px}
.crop-move-icon{font-size:29px;color:#b49071;line-height:1}
.photo-crop-wrap{position:relative;max-width:320px;margin:0 auto 17px;border:7px solid #fff;border-radius:13px;box-shadow:0 7px 24px #33271c1a;overflow:hidden;isolation:isolate;background:#ddd1c5}
#photo-crop-preview{display:block;width:100%;height:auto;aspect-ratio:360/458;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#photo-crop-preview.is-touching{cursor:grabbing}
.crop-hint{pointer-events:none;position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#26211bd9;color:#fff;border-radius:99px;padding:7px 10px;font-size:11px;font-weight:600;white-space:nowrap;max-width:94%;text-align:center}
.crop-zoom-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0 7px;font-size:13px;font-weight:700}
.crop-zoom-row output{font-variant-numeric:tabular-nums;color:#8f613f}
.photo-editor input[type=range]{width:100%;height:34px;accent-color:#a86b42;cursor:pointer;touch-action:pan-y}
.photo-editor-actions{display:flex;align-items:stretch;gap:9px;margin-top:11px}
.reset-photo-btn,.use-photo-btn{flex:1 1 0;min-height:48px;padding:10px;border-radius:11px;font-size:13px;font-weight:700}
.reset-photo-btn{background:#fff;color:#6f6052;border:1px solid #d9cec4}
.use-photo-btn{background:#312820;color:#fff;border:1px solid #312820}
.photo-editor-privacy{font-size:11px;line-height:1.45;color:#807870;text-align:center;margin:12px 0 0}
.preview-edit-photo{margin:0 0 13px}
@media(max-width:620px){
 .photo-editor{margin:12px -3px 17px;padding:15px 12px;border-radius:15px}
 .photo-editor h3{font-size:23px}
 .photo-crop-wrap{max-width:min(100%,295px);border-width:6px}
 .edit-photo-btn{width:100%;min-height:48px}
 .photo-edit-entry{padding:13px}
 .reset-photo-btn,.use-photo-btn{min-height:50px}
}
@media(prefers-reduced-motion:reduce){.photo-editor,.photo-crop-wrap{scroll-behavior:auto}}