@font-face{font-family:FotoSans;src:url('/assets/album-sans.ttf');font-display:swap}
@font-face{font-family:FotoSerif;src:url('/assets/album-serif.ttf');font-display:swap}
:root{font-family:FotoSans,Arial,sans-serif;font-size:16px;line-height:1.5;color:#20232a;background:#f5f6f8;font-synthesis:none;--ink:#20232a;--muted:#626873;--line:#e4e7ec;--accent:#305ed7;--paper:#fff;--surface:#f5f6f8;--radius:12px}
*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column}button,input,select{font:inherit;color:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer;border:1px solid transparent;border-radius:var(--radius);padding:11px 16px;min-height:48px;line-height:1.4;font-size:.875rem;font-weight:500;background:#edf0f5;transition:background .16s,border-color .16s,box-shadow .16s}button:hover{background:#e3e8f1}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #7698f3;outline-offset:3px}a{color:inherit;text-underline-offset:4px}h1,h2,h3,p{margin-top:0}h2{font-size:1.375rem;letter-spacing:-.025em;font-weight:600;margin-bottom:16px;line-height:1.3}h3{font-size:1rem;margin-bottom:12px}p{margin-bottom:16px}img{max-width:100%;display:block}.icon{width:22px;height:22px;display:block;flex:none}input:not([type=checkbox]):not([type=range]),select{width:100%;min-width:0;background:#fff;border:1px solid #cbd1db;border-radius:10px;padding:11px 12px;min-height:48px}input[type=range]{width:100%;accent-color:var(--accent);min-height:48px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);flex:none}input::placeholder{color:#757c88;opacity:1}.sr-only,.skip:not(:focus){position:absolute;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;left:0;top:0}.skip:focus{position:absolute;top:8px;left:8px;z-index:10;background:#fff;padding:12px}.primary{background:var(--accent);color:#fff}.primary:hover{background:#224bb8}.quiet{background:transparent;border-color:var(--line)}.icon-button{width:48px;padding:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}.text-button{background:none;border:0;padding:12px 0;color:var(--accent);font-size:.875rem;text-decoration:underline;text-underline-offset:4px;display:inline-block}.text-button:hover{background:none;color:#173f9f}.wide{width:100%}.muted,.panel-intro{color:var(--muted);font-size:.875rem;line-height:1.5}
/* A single inspector and an unobstructed photo stage. */
.topbar{display:flex;align-items:center;gap:28px;min-height:84px;flex:none;padding:12px 24px;border-bottom:1px solid var(--line);background:#fff;z-index:3}.brand{text-decoration:none;font-size:1.5rem;font-weight:500;line-height:1;white-space:nowrap;letter-spacing:-.04em;display:flex;align-items:center;gap:10px}.brand .icon{width:28px;height:28px;color:var(--accent)}.project-title{min-width:0;flex:1;border-left:1px solid var(--line);padding-left:24px}.title-field{display:block;max-width:440px}.title-field input{border-color:transparent!important;font-size:1rem;font-weight:500;padding:0 6px!important;min-height:30px!important;background:transparent!important}.save-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:.75rem;color:var(--muted);padding-left:6px}.project-actions{display:flex;gap:12px;margin-left:auto;flex:none}#export-open{display:flex;align-items:center;justify-content:center;gap:8px;min-width:122px}#workspace{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}.studio{display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:76px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}.toolnav{grid-column:1;grid-row:1;display:flex;align-items:stretch;gap:4px;padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.toolnav button{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:0;background:none;font-size:.875rem;font-weight:500;padding:6px 2px;border-radius:10px;min-width:0}.toolnav button .icon{width:20px;height:20px}.toolnav button[aria-pressed=true]{color:var(--accent);background:#ecf1ff}.editor-panel{grid-column:1;grid-row:2;display:none;padding:24px 20px;background:white;border-right:1px solid var(--line);overflow-y:auto;scrollbar-width:thin;min-width:0;min-height:0}.studio[data-panel=design] .design-panel,.studio[data-panel=photos] .photos-panel,.studio[data-panel=text] .text-panel,.studio[data-panel=color] .color-panel{display:block}.studio[data-panel=canvas]{grid-template-columns:minmax(0,1fr)}.studio[data-panel=canvas] .toolnav{display:none}.studio[data-panel=canvas] .canvas-panel{grid-column:1}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.panel-heading h2{margin:0}.panel-heading .text-button{padding:4px 0}.panel-intro{margin-bottom:24px}.templates{display:grid;grid-template-columns:1fr 1fr;gap:24px 12px}.template{background:transparent;border:0;text-align:left;padding:0;font-size:.875rem;min-width:0;line-height:1.4;font-weight:500}.template:hover{background:transparent}.template-preview{height:182px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;overflow:hidden;border-radius:12px;background:#f0f2f6;padding:10px;border:2px solid transparent;transition:border-color .16s,background .16s}.template-preview img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #18203624)}.template[aria-pressed=true] .template-preview{border-color:var(--accent);background:#ecf1ff}.template>span:last-child{display:block;padding:0 3px}.template small{display:block;font-size:.75rem;color:var(--muted);font-weight:400;margin-top:4px}.template[aria-pressed=true]>span:last-child{color:var(--accent)}.settings-section{padding-top:24px;margin-top:28px;border-top:1px solid var(--line)}.settings-section[open]>summary{margin-bottom:20px}summary{cursor:pointer;min-height:48px;font-size:.875rem;font-weight:500;padding:10px 0}summary:hover{color:var(--accent)}.swatches{display:flex;gap:8px;margin:8px 0 24px}.swatch{border:7px solid #fff;box-shadow:0 0 0 1px #e0e4ec;width:44px;min-height:44px;border-radius:50%;padding:0}.swatch[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px}.field{display:block;font-size:.875rem;margin-bottom:24px}.field>input,.field>select,.field>.row{display:block;margin-top:8px}.field output{float:right;color:var(--muted)}.check{display:flex;align-items:center;gap:10px;font-size:.875rem;margin-bottom:16px;min-height:48px;flex-wrap:wrap}.check input{margin:0}.check a{display:inline}.upload-button{background:#f5f7fc;border:1px dashed #9aaac6;width:100%;padding:18px 12px;margin-top:12px}.upload-button span{display:block;font-size:.75rem;font-weight:400;color:var(--muted);margin-top:8px}#upload-note{margin:16px 0}.raw-options{margin-bottom:24px;border-bottom:1px solid var(--line)}.raw-options p{font-size:.875rem}#culling-price{margin-top:12px}.segmented{display:flex;background:#f0f2f6;border-radius:10px;padding:4px;margin:20px 0 12px;gap:4px}.segmented button{flex:1;padding:8px 4px;background:none;font-size:.875rem}.segmented button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #10203814}.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}.photo-card{min-width:0}.photo-thumb{position:relative}.photo-open{width:100%;padding:0;background:#edf0f5;overflow:hidden;border-radius:10px;aspect-ratio:1;min-height:0}.photo-open img{width:100%;height:100%;object-fit:cover}.photo-toggle{position:absolute;right:4px;bottom:8px;width:48px;min-height:48px;padding:0;border-radius:50%;background:#fff;box-shadow:0 1px 6px #0002;font-size:1rem}.photo-toggle[aria-pressed=true]{background:var(--accent);color:#fff}.photo-caption{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-card>span{font-size:.75rem;line-height:1.5;display:block;margin-top:6px;color:var(--muted)}.help{border-top:1px solid var(--line);padding-top:12px;margin-top:28px;font-size:.875rem}.help p{margin-top:16px;color:var(--muted)}
.canvas-panel{grid-column:2;grid-row:1/span 2;min-width:0;min-height:0;display:flex;flex-direction:column;background:#e9ecf1}.canvas-toolbar{display:flex;align-items:center;gap:16px;padding:10px 20px;flex:none;background:#f9fafc;border-bottom:1px solid #dfe3eb;min-height:70px}.format-grid{display:flex;padding:3px;gap:3px;background:#e9edf3;border-radius:12px;min-width:0}.format-button{background:transparent;display:flex;gap:6px;align-items:center;justify-content:center;white-space:nowrap;padding:8px 12px;min-height:42px;font-weight:400}.format-button span{font-size:.75rem;color:var(--muted)}.format-button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #15284014;font-weight:500}.canvas-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.canvas-actions>.icon-button{border-color:transparent}.add-photos{display:flex;align-items:center;gap:6px;white-space:nowrap}.canvas-scroll{flex:1;min-height:0;overflow:auto;padding:20px;position:relative;scrollbar-width:thin;overscroll-behavior:contain;display:flex;align-items:flex-start}.canvas-stage{position:relative;width:var(--page-width,360px);max-width:none;flex:none;margin:auto;box-shadow:0 2px 5px #1c263810,0 18px 48px #1c263827;background:white}.canvas-stage>img{width:100%;max-width:none;height:auto;display:block}.photo-hotspots{position:absolute;inset:0}.photo-hotspots button{position:absolute;border:2px solid transparent;border-radius:0;background:transparent;padding:0;min-height:0;cursor:pointer}.photo-hotspots button:hover,.photo-hotspots button:focus-visible{border-color:#4679ed;box-shadow:inset 0 0 0 1px #fff}.photo-hotspots button span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;background:#fff;color:#20232a;padding:8px 12px;border-radius:24px;font-size:.875rem;opacity:0;pointer-events:none;box-shadow:0 3px 14px #10203824}.photo-hotspots button:hover span,.photo-hotspots button:focus-visible span{opacity:1}.render-state{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:#fff;padding:12px 16px;border-radius:12px;font-size:.875rem;max-width:90%;text-align:center;box-shadow:0 2px 16px #0002;z-index:2}.canvas-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 20px;background:#f9fafc;border-top:1px solid #dfe3eb;min-height:62px;flex:none;font-size:.875rem}.page-controls{display:flex;align-items:center;gap:4px;white-space:nowrap}.page-controls .icon-button{border-color:transparent}.canvas-view{display:flex;align-items:center;gap:16px}#canvas-format{font-size:.75rem;color:var(--muted);white-space:nowrap}.zoom-control{width:148px;flex:none}.zoom-control select{font-size:.875rem;border-color:transparent;min-height:44px;padding:8px;background:transparent}.empty-state{width:100%;max-width:1000px;margin:auto;display:flex;align-items:center;justify-content:center;gap:8%;padding:36px 24px}.empty-copy{max-width:370px;flex:1}.eyebrow{display:block;font-size:.75rem;letter-spacing:.1em;font-weight:500;color:var(--muted)}.empty-state h1{font-size:clamp(2.5rem,4.3vw,4rem);line-height:1.12;letter-spacing:-.05em;font-weight:500;margin:24px 0}.empty-state h1 em{font-family:FotoSerif,Georgia,serif;font-weight:400;letter-spacing:-.045em}.empty-state p{color:var(--muted);max-width:30ch;font-size:1rem}.empty-state .primary{display:flex;gap:8px;align-items:center;margin-top:28px;padding:14px 20px}.import-formats{display:block;font-size:.75rem;color:var(--muted);margin:12px 0}.empty-state .text-button{display:block}.welcome-figure{width:38%;max-width:320px;margin:0;flex:none;transform:rotate(3deg)}.welcome-figure img{width:100%;height:auto;box-shadow:0 10px 34px #1c263829}.welcome-figure figcaption{font-family:FotoSerif,Georgia,serif;font-style:italic;font-size:1rem;text-align:center;margin-top:20px;color:var(--muted)}.empty-selection{margin:auto;text-align:center;max-width:420px;padding:32px}.empty-selection p{color:var(--muted)}.drop-overlay{position:absolute;inset:12px;border:2px dashed var(--accent);border-radius:20px;background:#f2f6fff5;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}.drop-overlay strong{font-size:1.5rem}.drop-overlay span{margin-top:12px;color:var(--muted)}
.notice{position:absolute;z-index:8;top:12px;right:20px;max-width:min(520px,calc(100% - 40px));padding:14px 18px;border:1px solid #cbd7ed;border-radius:12px;background:#f2f6ff;box-shadow:0 6px 20px #10203814;font-size:.875rem;white-space:pre-line;overflow-wrap:anywhere}.notice.error{background:#fff4ef;color:#853827;border-color:#edc7b9}.progress-panel{display:flex;align-items:center;gap:20px;padding:12px 24px;background:#eef3ff;border-bottom:1px solid #d0dcf7;flex:none}.progress-panel>div{min-width:0;flex:1}.progress-panel strong,.progress-panel span{display:block;font-size:.875rem}.progress-panel progress{width:160px;accent-color:var(--accent)}#progress-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#progress-time{white-space:nowrap;font-size:.875rem}.caption-list{display:grid;gap:10px}.caption-list button{display:flex;align-items:center;text-align:left;gap:12px;background:#f3f5f8;padding:10px}.caption-list img{width:48px;height:60px;object-fit:cover;border-radius:5px}.caption-list span{font-size:.875rem;overflow-wrap:anywhere}
/* Focused dialogs preserve the current task and provide a clear completion action. */
dialog{border:1px solid var(--line);border-radius:20px;padding:28px;width:min(600px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;color:var(--ink);box-shadow:0 24px 90px #11192740;overscroll-behavior:contain}dialog::backdrop{background:#17223877;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.dialog-heading h2{margin:0;min-width:0;overflow-wrap:anywhere;font-size:1.25rem}.dialog-heading button{flex-shrink:0}.inline-error{color:#a23c2b;font-size:.875rem;white-space:pre-line}.cost{font-size:1.75rem;margin:20px 0}.balance-panel{padding:24px;background:#f0f4ff;border-radius:14px;margin-bottom:24px}.balance-panel strong{display:block;font-size:2rem;line-height:1.3;margin:8px 0}.balance-panel p{font-size:.875rem;margin:0}.history-list{display:grid;gap:8px;margin-bottom:24px}.history-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.875rem;overflow-wrap:anywhere}.history-row>div{min-width:0}.history-row small{display:block;color:var(--muted)}.history-row button{flex:none}.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.packages button{border:1px solid var(--line);background:#fff}.packages strong,.packages span{display:block}#account-content section{margin-bottom:28px}#account-key{font-size:.875rem}.export-options{display:grid;gap:12px;margin:24px 0}.export-preview{display:flex;align-items:center;gap:24px;padding:20px;background:#f2f4f8;border-radius:14px}.export-preview img{width:96px;max-height:150px;object-fit:contain;filter:drop-shadow(0 3px 6px #18203620)}.export-preview p{font-size:1rem;margin:12px 0 4px}.export-preview .eyebrow{font-size:.75rem}.download-links{display:grid;gap:10px}.download-links a{padding:14px;background:#edf2ff;border-radius:10px}.photo-dialog-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:32px}#photo-dialog{width:min(1060px,calc(100% - 32px))}.crop-column{min-width:0;align-self:start;position:sticky;top:0}.crop-stage{position:relative;width:100%;background:#e9ecf1;overflow:hidden;touch-action:none;border-radius:4px}.crop-stage img{width:100%;height:100%;object-fit:cover;user-select:none;cursor:grab;max-width:none}.crop-stage:active img{cursor:grabbing}#crop-hint{margin-top:16px;font-size:.875rem}.row{display:flex!important;gap:8px}.row button{flex:1}#photo-reason{font-size:.875rem}#photo-pick{margin-bottom:24px}.raw-photo-note{font-size:.875rem;padding:12px 14px;background:#f0f4ff;border-radius:10px}[hidden]{display:none!important}
@media(min-width:1600px){.studio{grid-template-columns:344px minmax(0,1fr)}.editor-panel{padding:28px 24px}.template-preview{height:212px}}
@media(max-width:1200px){.topbar{padding:12px 20px;gap:20px}.studio{grid-template-columns:296px minmax(0,1fr)}.editor-panel{padding:20px 16px}.template-preview{height:174px}.canvas-toolbar{gap:8px;padding:10px 12px}.format-button{padding:8px 10px}.format-button span{display:none}.add-photos{width:48px;padding:12px}.add-photos span{display:none}.canvas-footer{padding:6px 12px;gap:8px}#canvas-format{display:none}.empty-state{gap:28px;padding:24px 12px}.empty-state h1{font-size:2.7rem}.welcome-figure{width:36%}.canvas-actions{gap:0}}
@media(max-width:960px) and (min-width:801px){.studio{grid-template-columns:276px minmax(0,1fr)}.canvas-toolbar{flex-wrap:wrap}.canvas-actions{margin-left:auto}.format-button{padding:8px}.canvas-toolbar #redo{display:none}.empty-state{flex-direction:column;text-align:center}.empty-state p{margin-left:auto;margin-right:auto}.empty-state .primary,.empty-state .text-button{margin-left:auto;margin-right:auto}.welcome-figure{width:180px}.empty-state h1{font-size:2.4rem}.canvas-summary{font-size:.75rem}.zoom-control{width:132px}}
@media(max-width:800px){.topbar{min-height:72px;padding:10px 16px;gap:12px}.brand{font-size:1.25rem;gap:7px}.brand .icon{width:24px;height:24px}.project-title{border:0;padding:0}.title-field input{font-size:.875rem}.project-actions{gap:8px}.project-actions #account-open{font-size:0;width:48px;position:relative;padding:12px}.project-actions #account-open:after{content:'';width:22px;height:22px;display:block;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM4 21a8 8 0 0 1 16 0' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}.project-actions #export-open{min-width:110px;padding:11px 14px}.studio,.studio[data-panel=canvas]{display:flex;flex-direction:column;position:relative;padding-bottom:72px}.toolnav,.studio[data-panel=canvas] .toolnav{display:flex;position:absolute;bottom:0;left:0;right:0;height:72px;z-index:4;padding:6px 12px;background:#fff;border-right:0;border-top:1px solid var(--line);border-bottom:0;gap:8px}.toolnav button{font-size:.875rem;min-height:58px;gap:4px}.toolnav button .icon{width:22px;height:22px}.canvas-panel{flex:1;min-height:0;width:100%}.editor-panel{display:none!important;position:relative;flex:0 0 min(42dvh,360px);order:2;border-top:1px solid var(--line);border-right:0;padding:18px 20px;overflow:auto}.studio[data-panel=design] .design-panel,.studio[data-panel=photos] .photos-panel,.studio[data-panel=text] .text-panel,.studio[data-panel=color] .color-panel{display:block!important}.studio[data-panel=canvas] .editor-panel{display:none!important}.studio[data-panel=photos] .photos-panel{flex-basis:min(52dvh,440px)}.canvas-toolbar{padding:6px 12px;min-height:60px;gap:8px}.format-grid{flex:1;justify-content:space-around;padding:3px}.format-button{flex:1;padding:8px 6px;min-height:42px;font-size:.875rem}.canvas-actions{margin-left:0;gap:0}.canvas-actions #undo,.canvas-actions #redo{display:none}.canvas-actions .add-photos{border-color:transparent}.canvas-scroll{padding:16px}.canvas-footer{min-height:56px;padding:4px 12px}.page-controls{gap:2px}.canvas-view{gap:0}.zoom-control{width:140px}#canvas-summary{font-size:.75rem;max-width:130px}#canvas-format{display:none}.templates{grid-template-columns:repeat(3,1fr);gap:20px 12px}.template-preview{height:170px}.template small{font-size:.75rem}.photo-grid{grid-template-columns:repeat(3,1fr)}.empty-state{padding:24px 8px;gap:32px}.empty-state h1{font-size:2.5rem}.welcome-figure{width:34%;max-width:240px}.notice{top:10px;right:12px;max-width:calc(100% - 24px);padding:12px 14px}.progress-panel{flex-wrap:wrap;padding:12px 16px;gap:8px}.progress-panel>div{flex-basis:100%}.progress-panel progress{flex:1}.photo-dialog-body{display:block}.crop-column{position:static;margin-bottom:24px}#crop-stage{max-width:100%;margin:0 auto}dialog,#photo-dialog{padding:20px;width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:16px}.dialog-heading{position:sticky;top:-20px;background:#fff;z-index:3;padding:12px 0;gap:12px}.packages{grid-template-columns:1fr}.packages button{display:flex;justify-content:space-between}.history-row{flex-wrap:wrap}.caption-list{grid-template-columns:1fr 1fr}.swatch{width:48px;min-height:48px}.raw-options{margin-bottom:16px}}
@media(max-width:580px){.brand span{display:none}.project-title{max-width:calc(100% - 220px)}.topbar{gap:8px;padding:10px 12px}.save-status{font-size:.75rem}.project-actions #export-open{min-width:100px;padding:11px 10px}.canvas-toolbar{gap:4px;padding:6px 8px}.canvas-toolbar #toggle-inspector{width:44px;padding:10px}.canvas-actions{display:none}.canvas-footer{gap:4px;padding:4px 8px;flex-wrap:wrap}.page-controls{gap:0}#canvas-summary{max-width:none;font-size:.75rem}.zoom-control{width:130px}.zoom-control select{font-size:.75rem;padding:8px 4px}.empty-state{flex-direction:column;text-align:center;gap:24px;padding:24px 8px}.empty-copy{max-width:360px}.empty-state h1{font-size:2.6rem;margin:20px 0}.empty-state p{margin-left:auto;margin-right:auto}.empty-state .primary,.empty-state .text-button{margin-left:auto;margin-right:auto}.welcome-figure{width:160px;max-width:48%}.welcome-figure figcaption{display:none}.templates{grid-template-columns:1fr 1fr}.template-preview{height:176px}.editor-panel{padding:18px 16px}.export-preview{gap:16px;padding:16px}.export-preview img{width:76px}.export-preview .eyebrow{letter-spacing:.04em}.caption-list{grid-template-columns:1fr}}
@media(max-width:580px){.canvas-footer{flex-wrap:nowrap}#canvas-summary{display:none}.canvas-view{margin-left:auto}.page-controls{flex:none}}
@media(max-width:360px){.project-title{max-width:calc(100% - 202px)}.brand .icon{width:20px;height:20px}.project-actions{gap:4px}.topbar{padding:8px;gap:4px}.project-actions #export-open{min-width:94px}.project-actions #account-open{width:44px;padding:10px}.canvas-toolbar #toggle-inspector{width:40px;padding:8px}.format-button{padding:8px 4px;font-size:.875rem}.canvas-footer{display:flex}.page-controls{justify-self:auto}.toolnav{padding:6px 8px}.toolnav button{font-size:.875rem}.empty-state h1{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(max-width:800px){.studio[data-panel=design] .design-panel{flex-basis:276px;padding:14px 16px}.design-panel .panel-intro{margin-bottom:12px}.design-panel .templates{display:flex;gap:12px;overflow-x:auto;padding:0 2px 8px;scroll-snap-type:x proximity}.design-panel .template{flex:0 0 140px;scroll-snap-align:start}.design-panel .template-preview{height:136px;margin-bottom:6px}.design-panel .template small{font-size:.75rem}.design-panel .panel-heading h2{font-size:1.125rem}}

.mobile-history{display:none}
@media(max-width:800px){.mobile-history{display:block;position:relative;flex:none}.mobile-history summary{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:12px;list-style:none;border-radius:10px}.mobile-history summary::-webkit-details-marker{display:none}.mobile-history[open] summary{background:#ecf1ff;color:var(--accent)}.mobile-history>div{position:absolute;bottom:56px;left:0;padding:8px;width:208px;background:#fff;box-shadow:0 8px 36px #1c263829;border:1px solid var(--line);border-radius:12px;z-index:5}.mobile-history button{display:block;width:100%;text-align:left;background:transparent}.canvas-footer{gap:4px}.canvas-footer #canvas-summary{display:none}.page-controls .icon-button{width:44px;padding:10px}.zoom-control{width:120px}.canvas-view{margin-left:auto}.editor-panel,.studio[data-panel=photos] .photos-panel{flex-basis:clamp(180px,34dvh,280px)}.studio[data-panel=design] .design-panel{flex-basis:clamp(180px,calc(100dvh - 490px),276px)}}

@media(max-width:800px) and (max-height:740px){.studio[data-panel=design] .design-panel{flex-basis:208px;padding:10px 16px}.design-panel .panel-intro{display:none}.design-panel .template-preview{height:90px}.design-panel .template small{display:none}.design-panel .template{flex-basis:124px}}

/* Shoot-first workflow: photographs stay full and uncropped until composition. */
.workflow-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 24px;border-bottom:1px solid var(--line);background:#fff;flex:none;min-height:60px}.workflow-bar ol{list-style:none;padding:0;margin:0;display:flex;gap:36px;color:var(--muted);font-size:.875rem}.workflow-bar li{display:flex;gap:10px;align-items:center}.workflow-bar li[aria-current=step]{color:var(--accent);font-weight:600}.selection-workspace{flex:1;overflow:auto;min-height:0;padding:40px max(24px,calc((100vw - 1320px)/2));background:#f6f7fa;scrollbar-width:thin}.selection-heading{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:30px}.selection-heading h1{font-size:clamp(2rem,3.2vw,3rem);line-height:1.13;letter-spacing:-.04em;margin:14px 0 16px;font-weight:500}.selection-heading p{max-width:650px;color:var(--muted);font-size:1rem;margin-bottom:0}.flow-actions{display:flex;flex-direction:column;gap:10px;flex:none;min-width:240px}.flow-actions button{width:100%;font-size:1rem}.flow-empty{background:#fff;border:1px solid var(--line);border-radius:20px;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:42px;margin-top:38px}.flow-empty>div{align-self:center;text-align:center}.flow-empty>div>.icon{width:52px;height:52px;color:var(--accent);margin:0 auto 18px}.flow-empty strong{display:block;font-size:1.375rem;font-weight:500}.flow-empty p{font-size:.875rem;color:var(--muted);margin:12px 0 24px}.flow-empty ol{list-style:none;padding:0;margin:0}.flow-empty li{display:flex;align-items:flex-start;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}.flow-empty li:last-child{border:0}.flow-empty b{font-size:.875rem;color:var(--accent);font-weight:500}.flow-empty span{font-size:1rem}.flow-empty small{display:block;font-size:.875rem;color:var(--muted);margin-top:6px}.flow-import-options{margin:20px 0;max-width:650px}.flow-import-options .raw-options{margin:0;border:0}.flow-import-options .field{max-width:360px}.selection-toolbar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:20px}.selection-toolbar .segmented{margin:0}.selection-toolbar label{display:flex;align-items:center;gap:12px;font-size:.875rem}.selection-toolbar select{width:210px}.selection-summary{font-size:1rem;color:var(--muted);margin-bottom:24px}.selection-summary:empty{display:none}.selection-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 18px}.selection-card{position:relative;min-width:0}.selection-card .selection-open{padding:8px;background:#e8ebf1;display:block;width:100%;height:240px;border-radius:12px;border:1px solid #dfe3eb;overflow:hidden}.selection-card img{width:100%;height:100%;object-fit:contain}.selection-card .selection-pick{position:absolute;right:8px;top:8px;background:white;box-shadow:0 2px 8px #0002;min-height:44px;width:44px;padding:0;border-radius:50%;font-size:1.125rem}.selection-card .selection-pick[aria-pressed=true]{background:var(--accent);color:white}.selection-card .selection-name{margin:10px 0 4px;color:var(--muted);font-size:.75rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selection-card .selection-reason{font-size:.875rem;line-height:1.45;display:block}.selection-card .selection-tag{display:inline-block;font-size:.75rem;color:#1d4b85;background:#e7eefb;border-radius:6px;padding:3px 7px;margin-top:8px}.flow-no-photos{padding:48px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px}#flow-more{display:block;margin:28px auto}#flow-new{margin-top:28px}#photo-preferred{margin:0 0 20px}.flow-actions .text-button{font-size:.875rem}#flow-upload:not(.primary){background:#fff;border:1px solid var(--line)}
@media(max-width:1150px){.selection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.selection-card .selection-open{height:210px}}
@media(max-width:800px){.workflow-bar{padding:8px 16px;min-height:52px}.workflow-bar ol{gap:18px}.workflow-bar li{gap:6px}.workflow-bar #back-to-selection{min-height:44px;padding:8px 12px}.selection-workspace{padding:24px 16px}.selection-heading{align-items:stretch;flex-direction:column;gap:20px;margin-bottom:20px}.selection-heading h1{font-size:2.1rem}.flow-actions{min-width:0}.flow-empty{padding:24px;gap:20px;grid-template-columns:1fr;margin-top:24px}.flow-empty li{padding:18px 0}.selection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}.selection-card .selection-open{height:190px}.selection-toolbar{gap:12px}.selection-toolbar label{width:100%}.selection-toolbar select{flex:1}.flow-import-options{margin:16px 0}.flow-no-photos{padding:28px 20px}}
@media(max-width:580px){.workflow-bar ol{gap:14px;font-size:.75rem}.workflow-bar li{gap:4px}.workflow-bar #back-to-selection{font-size:.75rem;padding:6px}.selection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.selection-card .selection-open{height:196px}.selection-heading h1{font-size:2rem}.selection-card .selection-pick{min-height:44px;width:44px}.selection-heading p{font-size:1rem}.flow-empty{padding:24px 16px}.selection-toolbar .segmented{width:100%}.selection-card .selection-reason{font-size:.875rem}}

.selection-card-body p{font-size:.875rem;line-height:1.5;margin:8px 0 6px;overflow-wrap:anywhere}.selection-card-body small{display:block;font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selection-card-body .text-button{padding:8px 0;font-size:.875rem;text-align:left}.selection-heading h1{max-width:780px;letter-spacing:-.025em}

#selection-options{font-size:.875rem;position:relative}#selection-options summary{padding:12px 0;min-height:44px;cursor:pointer}#selection-options label{padding:12px 0}#selection-options[open] label{position:absolute;z-index:2;background:#fff;border:1px solid var(--line);padding:16px;border-radius:12px;box-shadow:0 8px 20px #0001;min-width:300px}.selection-workspace[data-ready=true] .selection-heading h1{margin:0}.selection-workspace[data-ready=true] .selection-heading{margin-bottom:20px}
@media(max-width:580px){.selection-workspace[data-ready=true] .selection-heading h1{font-size:1.75rem}.selection-workspace[data-ready=true] .selection-heading{gap:16px}.selection-workspace[data-ready=true] .selection-toolbar{gap:4px;margin-bottom:8px}.selection-workspace[data-ready=true] .selection-summary{margin:0 0 16px;font-size:.875rem}.workflow-bar:has(#back-to-selection:not([hidden])) li:not([aria-current]) span{display:none}#selection-options[open] label{min-width:280px;left:0}.selection-card-body p{margin-top:6px}}