:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#24272e;--muted:#737983;--soft-muted:#949aa4;--line:#e7e3dc;--line-strong:#d9d4cc;--paper:#fff;--paper-warm:#fbfaf7;--page:#f5f2ed;--accent:#c8e9f6;--accent-deep:#4e8297;--accent-soft:#edf8fc;--danger:#b34d4d;--danger-soft:#fff0ef;--success:#3f7962;--shadow-sm:0 8px 26px #252a3012;--shadow-md:0 20px 60px #252a301c;--shadow-lg:0 32px 100px #252a3029;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--sans:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--serif:Iowan Old Style, Baskerville, "Times New Roman", Georgia, serif;--preview-scale:1}*{box-sizing:border-box}html{background:var(--page);min-width:320px}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 15% -10%, #cfeaf4bf, transparent 32rem), radial-gradient(circle at 90% 15%, #f2dce180, transparent 28rem), var(--page);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}button,input{font:inherit}button{color:inherit}button,[role=button],input[type=range],input[type=color]{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,.drop-zone:focus-visible,.position-option:focus-visible{outline-offset:2px;outline:3px solid #4e829747}svg{display:block}.ambient{z-index:-1;pointer-events:none;filter:blur(1px);position:fixed}.ambient-one{background:#c8e9f66b;border-radius:50%;width:24rem;height:24rem;top:10rem;left:-12rem}.ambient-two{background:#e2dcf261;border-radius:50%;width:30rem;height:30rem;bottom:4rem;right:-17rem}.topbar{z-index:30;-webkit-backdrop-filter:blur(20px)saturate(1.25);backdrop-filter:blur(20px)saturate(1.25);background:#faf8f4e0;border-bottom:1px solid #d9d4ccb8;justify-content:space-between;align-items:center;gap:24px;min-height:76px;padding:12px clamp(18px,3vw,42px);display:flex;position:sticky;top:0}.brand{min-width:0;color:inherit;align-items:center;gap:12px;text-decoration:none;display:inline-flex}.brand-mark{background:linear-gradient(145deg,#edf9fd,#dceff6);border:1px solid #4e829726;border-radius:14px;flex:none;place-items:center;width:44px;height:44px;display:grid;box-shadow:inset 0 1px #ffffffe6,0 8px 24px #4e82971f}.brand-mark svg{fill:#456d7b;width:27px;height:27px}.brand>span:last-child{gap:1px;min-width:0;display:grid}.brand strong{font-family:var(--serif);letter-spacing:-.02em;white-space:nowrap;font-size:20px;font-weight:600}.brand small{color:var(--muted);letter-spacing:.02em;white-space:nowrap;font-size:11px}.topbar-actions{align-items:center;gap:8px;display:flex}.privacy-pill{color:#4b6d60;white-space:nowrap;background:#eef7f2cc;border:1px solid #3f796221;border-radius:999px;align-items:center;gap:7px;margin-right:4px;padding:8px 11px;font-size:12px;font-weight:650;display:inline-flex}.privacy-pill svg{fill:currentColor;width:15px;height:15px}.button,.icon-button,.mini-action,.text-button,.palette-option,.position-option,.quality-option{cursor:pointer;border:0}.button{border-radius:12px;justify-content:center;align-items:center;gap:9px;min-height:42px;padding:10px 16px;font-weight:720;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;display:inline-flex}.button:hover:not(:disabled){transform:translateY(-1px)}.button:active:not(:disabled){transform:translateY(0)}.button:disabled,.icon-button:disabled,.mini-action:disabled,.text-button:disabled{cursor:not-allowed;opacity:.42}.button-small{border-radius:10px;min-height:36px;padding:8px 12px;font-size:13px}.button-primary{color:#fff;background:#3f6f82;box-shadow:0 10px 24px #3f6f8238}.button-primary:hover:not(:disabled){background:#365f6f;box-shadow:0 13px 28px #3f6f8247}.button-quiet{border:1px solid var(--line);background:#ffffffbf}.button-quiet:hover:not(:disabled){border-color:var(--line-strong);background:#fff}.button-danger,.button-danger-soft{color:var(--danger)}.button-danger{color:#fff;background:var(--danger)}.button-danger-soft{background:var(--danger-soft);border:1px solid #b34d4d1f}.icon-button{background:0 0;border:1px solid #0000;border-radius:12px;flex:none;place-items:center;width:40px;height:40px;transition:border-color .15s,background .15s,transform .15s;display:inline-grid}.icon-button:hover:not(:disabled){border-color:var(--line);background:#ffffffb8}.icon-button:active:not(:disabled){transform:scale(.96)}.icon-button svg{fill:currentColor;width:20px;height:20px}.icon-button-small{border-radius:10px;width:34px;height:34px}.icon-button-small svg{width:18px;height:18px}
.workspace{grid-template-columns:minmax(260px,306px) minmax(480px,1fr) minmax(300px,344px);align-items:start;gap:clamp(16px,1.8vw,28px);width:min(1780px,100%);margin:0 auto;padding:clamp(18px,2.2vw,34px) clamp(16px,2.5vw,38px) 48px;display:grid}.panel{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffdb;border:1px solid #dfdbd4eb}.photos-panel,.style-panel{scrollbar-width:thin;scrollbar-color:#d4d0ca transparent;max-height:calc(100vh - 116px);padding:20px;position:sticky;top:96px;overflow:auto}.photos-panel::-webkit-scrollbar{width:7px;height:7px}.style-panel::-webkit-scrollbar{width:7px;height:7px}.stage-scroll::-webkit-scrollbar{width:7px;height:7px}.photos-panel::-webkit-scrollbar-thumb{background:#d4d0ca;border-radius:99px}.style-panel::-webkit-scrollbar-thumb{background:#d4d0ca;border-radius:99px}.stage-scroll::-webkit-scrollbar-thumb{background:#d4d0ca;border-radius:99px}.panel-heading,.crop-card-heading,.tray-heading,.settings-heading{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.panel-heading{margin-bottom:16px}.eyebrow{color:var(--accent-deep);letter-spacing:.14em;text-transform:uppercase;margin:0 0 4px;font-size:10px;font-weight:800}h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--ink)}.panel-heading h2,.studio-toolbar h1{font-family:var(--serif);letter-spacing:-.025em;margin:0;font-size:23px;font-weight:560}.count-pill{color:#4a7180;background:#f0f8fb;border:1px solid #dbeaf0;border-radius:999px;justify-content:center;align-items:baseline;gap:1px;min-width:52px;padding:7px 10px;font-size:12px;display:inline-flex}.count-pill strong{font-size:14px}.drop-zone{min-height:178px;color:var(--muted);text-align:center;background:linear-gradient(#eff9fcc7,#f9fcfce6),repeating-linear-gradient(45deg,#0000,#0000 8px,#c8e9f633 8px 16px);border:1.5px dashed #bfd6df;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;padding:18px;transition:border-color .15s,background .15s,transform .15s;display:flex}.drop-zone:hover,.drop-zone.is-dragging{background:#edf8fc;border-color:#74a7b9}.drop-zone.is-dragging{transform:scale(1.01)}.drop-zone strong{color:var(--ink);margin-bottom:4px;font-size:15px}.drop-zone>span:not(.drop-icon){margin-bottom:14px;font-size:12px}.mobile-drop-copy,.mobile-only-copy{display:none}.drop-icon{color:#527f90;background:#dff2f9;border-radius:14px;place-items:center;width:44px;height:44px;margin-bottom:12px;display:grid}.drop-icon svg{fill:currentColor;width:23px;height:23px}.quick-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;display:grid}.mini-action{border:1px solid var(--line);background:#fff;border-radius:11px;justify-content:center;align-items:center;gap:7px;min-height:38px;padding:8px 9px;font-size:12px;font-weight:700;transition:background .15s,border-color .15s,transform .15s;display:inline-flex}.mini-action:hover:not(:disabled){background:#f8fbfc;border-color:#cfd7da;transform:translateY(-1px)}.mini-action svg{fill:#568294;width:16px;height:16px}.section-divider{background:var(--line);height:1px;margin:20px 0}.tray-heading{align-items:center;margin-bottom:12px}.tray-heading h3,.crop-card h3,.settings-heading h3,.export-card h3{letter-spacing:-.01em;margin:0;font-size:14px;font-weight:780}.tray-heading p,.settings-heading span{color:var(--muted);margin:3px 0 0;font-size:11px;line-height:1.4}.text-button{background:0 0;padding:5px 2px;font-size:12px;font-weight:750}.danger-text{color:var(--danger)}.photo-tray{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.tray-item{aspect-ratio:1;border:1px solid var(--line);cursor:grab;background:#f2f0ec;border-radius:11px;min-width:0;padding:0;transition:border-color .15s,transform .15s,box-shadow .15s;position:relative;overflow:hidden}.tray-photo-button{border-radius:inherit;background:0 0;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0;overflow:hidden}.tray-item:hover{border-color:#bacdd4;transform:translateY(-1px);box-shadow:0 7px 18px #323d421c}.tray-item:active{cursor:grabbing}.tray-item.is-selected{border-color:#5f91a3;box-shadow:0 0 0 2px #5f91a333}.tray-item.is-drop-target,.tray-empty.is-drop-target{border-color:#4d8498;transform:scale(1.03);box-shadow:0 0 0 3px #4d84983d}.tray-item.is-dragging{opacity:.45}.tray-item img{object-fit:cover;pointer-events:none;width:100%;height:100%}.photo-drag-handle{z-index:5;color:#fff;cursor:grab;opacity:0;touch-action:none;background:#1c2227ad;border:1px solid #ffffffa3;border-radius:11px;place-items:center;width:38px;height:38px;padding:0;transition:opacity .15s,background .15s,transform .15s;display:none;position:absolute;box-shadow:0 3px 10px #1e252933}.photo-drag-handle:hover,.photo-drag-handle:focus-visible{background:#305b6ce6}.photo-drag-handle:active{cursor:grabbing;transform:scale(.96)}.photo-drag-handle svg{fill:currentColor;width:19px;height:19px}.tray-drag-handle{top:5px;right:5px}.tray-item:hover .tray-drag-handle,.tray-item:focus-within .tray-drag-handle,.tray-item.is-selected .tray-drag-handle{opacity:1}.tray-move-actions{display:none}.tray-move-button{color:#486a78;background:#f4f8f9;border:0;justify-content:center;align-items:center;gap:5px;min-width:0;min-height:42px;padding:4px;font-weight:760;display:inline-flex}.tray-move-button+.tray-move-button{border-left:1px solid #dfe8eb}.tray-move-button span{font-size:18px;line-height:1}.tray-move-button small{font-size:9px}.tray-number{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;background:#1c1f249e;border:1px solid #ffffff85;border-radius:7px;place-items:center;width:20px;height:20px;font-size:10px;font-weight:800;display:grid;position:absolute;top:5px;left:5px}.tray-empty{aspect-ratio:1;color:#aaa59d;background:#faf9f6;border:1px dashed #d6d1ca;border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:18px;display:flex}.tray-empty span{font-size:22px;line-height:1}.tray-empty small{font-size:9px;font-weight:750;display:none}body.is-pointer-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.crop-card{background:#f7fbfc;border:1px solid #dfe9ed;border-radius:16px;margin-top:16px;padding:15px}.crop-card-heading{align-items:center;margin-bottom:14px}.range-field{margin-top:12px;display:block}.range-field>span{color:var(--muted);justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font-size:11px;font-weight:700;display:flex}.range-field output{color:#4f7482;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;background:linear-gradient(to right, #81acbc 0 var(--range-fill,0%), #dfe4e6 var(--range-fill,0%) 100%);border-radius:99px;width:100%;height:4px;margin:4px 0}input[type=range]::-webkit-slider-thumb{appearance:none;background:#4f8092;border:3px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 8px #2d4f5b3d}input[type=range]::-moz-range-thumb{background:#4f8092;border:3px solid #fff;border-radius:50%;width:13px;height:13px;box-shadow:0 2px 8px #2d4f5b3d}.crop-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:15px;display:grid}.crop-actions .button:last-child{grid-column:1/-1}
.studio{min-width:0}.studio-toolbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:0 4px;display:flex}.studio-toolbar h1{font-size:clamp(24px,2vw,30px)}.view-actions{background:#ffffffad;border:1px solid #dbd7d0e0;border-radius:13px;align-items:center;gap:4px;padding:3px;display:flex}.zoom-label{min-width:50px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;font-size:12px;font-weight:750}.stage-scroll{border-radius:var(--radius-xl);min-height:720px;box-shadow:inset 0 1px 0 #ffffffe6, var(--shadow-sm);background-color:#f8f7f4c2;background-image:linear-gradient(#0000 31px,#797f840a 32px),linear-gradient(90deg,#0000 31px,#797f840a 32px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:32px 32px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:1px solid #dcd8d1e6;place-items:start center;padding:clamp(14px,2vw,28px);display:grid;overflow:auto}.stage{width:min(100%, calc(640px * var(--preview-scale)));min-width:330px;box-shadow:var(--shadow-md);background:#fff;border:1px solid #d3cfc8e0;border-radius:26px;padding:clamp(10px,1.1vw,16px);transition:width .18s}.collage{--collage-bg:#f7f7f4;--card-bg:#c8e9f6;--title-ink:#30363c;--gap-pct:1.37931%;--padding-pct:2.06897%;--tile-radius-pct:0.68965%;aspect-ratio:1160/1536;gap:var(--gap-pct);width:100%;padding:var(--padding-pct);background:var(--collage-bg);-webkit-user-select:none;user-select:none;border-radius:14px;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));display:grid;position:relative;overflow:hidden}.collage-tile{border-radius:clamp(1px, var(--tile-radius-pct), 28px);background:#edeae5;border:1px solid #292e340a;min-width:0;min-height:0;transition:transform .15s,box-shadow .15s,outline-color .15s;position:relative;overflow:hidden}.collage.has-shadow .collage-tile{box-shadow:0 3px 10px #24282d21}.photo-tile{cursor:grab}.photo-tile:active{cursor:grabbing}.photo-tile:hover{z-index:2;transform:translateY(-1px)}.photo-tile.is-selected{z-index:3;outline-offset:calc(max(2px, .28vw) * -1);outline:max(2px,.28vw) solid #497d91e6}.photo-tile.is-dragging{opacity:.42}.photo-tile.is-drop-target{outline-offset:calc(max(2px, .3vw) * -1);outline:max(2px,.3vw) solid #497d91f2}.photo-tile img{object-fit:cover;object-position:var(--focus-x,50%) var(--focus-y,50%);width:100%;height:100%;transform:scale(var(--photo-zoom,1));transform-origin:var(--focus-x,50%) var(--focus-y,50%);pointer-events:none;will-change:transform;position:absolute;inset:0}.collage-drag-handle{width:clamp(26px,3vw,38px);height:clamp(26px,3vw,38px);top:5px;right:5px}.photo-tile:hover .collage-drag-handle,.photo-tile:focus-within .collage-drag-handle,.photo-tile.is-selected .collage-drag-handle{opacity:1}.tile-number{z-index:2;color:#fff;opacity:0;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);pointer-events:none;background:#1d22278c;border:1px solid #ffffff85;border-radius:8px;place-items:center;width:clamp(18px,1.8vw,24px);height:clamp(18px,1.8vw,24px);font-size:clamp(8px,.7vw,10px);font-weight:800;transition:opacity .15s;display:grid;position:absolute;top:6px;left:6px}.photo-tile:hover .tile-number,.photo-tile.is-selected .tile-number{opacity:1}.empty-tile{color:#9b9892;text-align:center;cursor:pointer;background:linear-gradient(145deg,#ffffff8c,#ffffff0d),repeating-linear-gradient(45deg,#efede9 0 7px,#f5f3f0 7px 14px);place-items:center;padding:8%;display:grid}.empty-tile:hover{color:#5e8492;background:#edf7fa}.empty-tile span{place-items:center;gap:5px;font-size:clamp(8px,.9vw,12px);font-weight:750;display:grid}.empty-tile svg{fill:currentColor;opacity:.85;width:clamp(19px,2.5vw,32px);height:clamp(19px,2.5vw,32px)}.title-tile{color:var(--title-ink);background:var(--card-bg);text-align:center;cursor:default;justify-content:center;align-items:center;padding:7.5%;display:flex;container-type:inline-size}.title-content{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:flex}.title-name{max-width:100%;font-family:var(--serif);letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap;margin-bottom:1%;font-size:clamp(10px,11.5cqw,38px);font-weight:400;overflow:hidden}.title-number-row{font-family:var(--serif);letter-spacing:-.07em;justify-content:center;align-items:flex-start;margin:0 0 1%;font-style:italic;font-weight:800;display:inline-flex}.title-number{font-size:clamp(24px,25cqw,90px)}.title-suffix{letter-spacing:-.04em;margin-top:10%;margin-left:3px;font-size:clamp(7px,7cqw,24px)}.title-label{max-width:100%;font-family:var(--serif);letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(12px,13.5cqw,44px);font-weight:400;overflow:hidden}.title-divider{opacity:.72;background:currentColor;width:24%;height:1px;margin:6% 0 5%}.title-dates{max-width:100%;color:color-mix(in srgb, var(--title-ink) 72%, transparent);font-family:var(--serif);letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(7px,5.6cqw,17px);overflow:hidden}.stage-tip{color:#737a81;text-align:center;justify-content:center;align-items:center;gap:7px;padding:10px 4px 0;font-size:11px;display:flex}.stage-tip svg{fill:#5b806f;flex:none;width:15px;height:15px}.studio-footer{color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;padding:12px 10px 0;font-size:11px;display:flex}kbd{color:#50545a;font-family:var(--sans);background:#fff;border:1px solid #d8d4cd;border-bottom-width:2px;border-radius:5px;padding:2px 6px;font-size:10px;font-weight:750}
.style-panel{padding-bottom:16px}.settings-section{border-top:1px solid var(--line);padding:18px 0}.settings-section:first-of-type{border-top:0;padding-top:2px}.settings-heading{align-items:flex-end;margin-bottom:14px}.settings-heading>span{text-align:right;max-width:150px}.field-grid{gap:10px;display:grid}.field-grid-two{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}.field{gap:6px;margin-bottom:10px;display:grid}.field>span,.color-field>span:first-child{color:var(--muted);font-size:11px;font-weight:750}.field input[type=text],.field input[type=number],.field input[type=date]{width:100%;min-width:0;height:41px;color:var(--ink);background:#fff;border:1px solid #dedad3;border-radius:10px;padding:9px 11px;transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 1px 2px #272b3005}.field input:hover{border-color:#ccc7bf}.field input:focus{border-color:#76a4b4;outline:none;box-shadow:0 0 0 3px #76a4b424}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;gap:14px;margin-top:4px;padding:11px 0 2px;display:flex;position:relative}.toggle-row>span:first-child{gap:2px;display:grid}.toggle-row strong{font-size:12px}.toggle-row small{color:var(--muted);font-size:10px;line-height:1.4}.toggle-row input{opacity:0;pointer-events:none;position:absolute}.toggle{background:#d9d7d1;border-radius:999px;flex:none;width:40px;height:23px;transition:background .16s;position:relative}.toggle:after{content:"";background:#fff;border-radius:50%;width:17px;height:17px;transition:transform .16s;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #2a2e322e}.toggle-row input:checked+.toggle{background:#5f8fa0}.toggle-row input:checked+.toggle:after{transform:translate(17px)}.toggle-row input:focus-visible+.toggle{outline-offset:2px;outline:3px solid #4e829733}.palette-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;display:grid}.palette-option{background:0 0;border:1px solid #0000;border-radius:10px;justify-items:center;gap:5px;min-width:0;padding:5px 2px 6px;display:grid}.palette-option span{background:var(--swatch);border:3px solid #fff;border-radius:50%;width:30px;height:30px;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 1px #d8d4cd,0 4px 10px #272b3014}.palette-option small{color:var(--muted);font-size:9px;font-weight:700}.palette-option:hover span{transform:translateY(-1px)scale(1.04)}.palette-option.is-active{background:#f4f9fa;border-color:#dce9ed}.palette-option.is-active span{box-shadow:0 0 0 2px #5c8b9d,0 4px 12px #272b301c}.color-pickers{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;display:grid}.color-field{gap:6px;display:grid}.color-control{background:#fff;border:1px solid #dedad3;border-radius:10px;align-items:center;gap:7px;height:38px;padding:4px 8px 4px 5px;display:flex}.color-control input[type=color]{cursor:pointer;background:0 0;border:0;border-radius:8px;width:30px;height:28px;padding:0;overflow:hidden}.color-control input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-control input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}.color-control output{min-width:0;color:var(--muted);letter-spacing:.03em;text-overflow:ellipsis;font-size:10px;font-weight:700;overflow:hidden}.title-position-wrap{grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;display:grid}.position-grid{aspect-ratio:3/4;background:#faf9f6;border:1px solid #dedad3;border-radius:12px;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:4px;width:96px;padding:5px;display:grid}.position-option{background:#fff;border:1px solid #e4e1dc;border-radius:5px;min-width:0;min-height:0;padding:0;transition:background .15s,border-color .15s,transform .15s}.position-option:hover{border-color:#b7cdd5;transform:scale(1.06)}.position-option.is-active{background:var(--accent);border-color:#5f8fa0;box-shadow:inset 0 0 0 1px #fff9}.layout-sliders{min-width:0}.compact-range{margin-top:0}.compact-range+.compact-range{margin-top:14px}
.export-card{background:radial-gradient(circle at 100% 0,#c8e9f6b8,#0000 13rem),#f7fbfc;border:1px solid #d8e7ec;border-radius:18px;margin-top:4px;padding:16px}.export-card-top{gap:11px;display:flex}.export-card-top p:last-child{color:var(--muted);margin:5px 0 0;font-size:10px;line-height:1.45}.export-icon{color:#4a7889;background:#dff2f8;border-radius:12px;flex:none;place-items:center;width:38px;height:38px;display:grid}.export-icon svg{fill:currentColor;width:20px;height:20px}.quality-switch{background:#ffffffad;border:1px solid #dfe7e9;border-radius:12px;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0 10px;padding:4px;display:grid}.quality-option{text-align:center;background:0 0;border-radius:8px;gap:2px;padding:8px 6px;display:grid}.quality-option strong{font-size:11px}.quality-option small{color:var(--muted);font-size:9px}.quality-option.is-active{background:#fff;box-shadow:0 3px 12px #2a2f3417}.button-export,.button-share{width:100%}.button-export{color:#fff;background:#2f6579;box-shadow:0 12px 24px #2f65793b}.button-export:hover:not(:disabled){background:#29596a;box-shadow:0 15px 28px #2f65794a}.button-export svg,.button-share svg{fill:currentColor;width:18px;height:18px}.button-share{color:#346a7d;background:#fff;border:1px solid #cfe0e5;margin-top:8px}.help-dialog,.confirm-dialog{width:min(92vw,520px);max-height:88vh;box-shadow:var(--shadow-lg);background:#fff;border:0;border-radius:24px;padding:0;overflow:auto}.help-dialog::backdrop,.confirm-dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#23272c73}.help-dialog form,.confirm-dialog form{margin:0;padding:28px;position:relative}.dialog-close{position:absolute;top:14px;right:14px}.dialog-art{background:#f0f8fb;border-radius:22px;place-items:center;width:70px;height:70px;margin-bottom:16px;display:inline-grid}.dialog-art svg{fill:#dbe3e6;width:54px;height:54px}.dialog-art .accent{fill:#9dd4e7}.help-dialog h2,.confirm-dialog h2{font-family:var(--serif);letter-spacing:-.03em;margin:0 0 10px;font-size:28px;font-weight:560}.help-steps{gap:15px;margin:22px 0;padding:0;list-style:none;display:grid}.help-steps li{gap:12px;display:flex}.help-steps li>span{color:#416e7e;background:#e6f4f8;border-radius:9px;flex:none;place-items:center;width:28px;height:28px;font-size:12px;font-weight:800;display:grid}.help-steps strong{font-size:13px}.help-steps p{color:var(--muted);margin:3px 0 0;font-size:11px;line-height:1.55}.privacy-note{color:#506f62;background:#eff7f2;border-radius:12px;align-items:flex-start;gap:8px;padding:12px;font-size:11px;line-height:1.45;display:flex}.privacy-note svg{fill:currentColor;flex:none;width:18px;height:18px}.dialog-action{width:100%;margin-top:18px}.confirm-dialog p{color:var(--muted);margin-bottom:22px;font-size:13px;line-height:1.55}.dialog-buttons{justify-content:flex-end;gap:8px;display:flex}.toast{z-index:80;color:#fff;opacity:0;pointer-events:none;background:#262b31f0;border:1px solid #ffffff2e;border-radius:13px;justify-content:center;align-items:center;max-width:min(92vw,460px);padding:11px 16px;font-size:12px;font-weight:650;transition:opacity .18s,transform .18s;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);box-shadow:0 14px 34px #181b1f42}.toast.is-visible{opacity:1;transform:translate(-50%)}.busy-overlay{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f6f4f0bd;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.busy-overlay[hidden]{display:none}.busy-card{min-width:min(92vw,320px);box-shadow:var(--shadow-md);text-align:center;background:#fff;border:1px solid #dad6cfe6;border-radius:22px;place-items:center;padding:28px;display:grid}.busy-card strong{font-family:var(--serif);margin-top:14px;font-size:20px}.busy-card span:last-child{color:var(--muted);margin-top:5px;font-size:11px}.spinner{border:3px solid #dce9ed;border-top-color:#4b7f91;border-radius:50%;width:34px;height:34px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1320px){.workspace{grid-template-columns:minmax(250px,290px) minmax(430px,1fr) minmax(285px,320px)}.privacy-pill{display:none}.stage-scroll{min-height:650px}}@media (max-width:1080px){.workspace{grid-template-columns:minmax(250px,310px) minmax(440px,1fr)}.style-panel{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;max-height:none;display:grid;position:static}.style-panel>.panel-heading{grid-column:1/-1}.style-panel .settings-section{padding:18px 0}.style-panel .settings-section:nth-of-type(2),.style-panel .export-card{border-left:1px solid var(--line);padding-left:24px}.export-card{align-self:start;margin:18px 0}}@media (max-width:800px){.topbar{min-height:66px;padding:10px 14px}.brand small,#undoButton,#redoButton,#helpButton,#newProjectButton{display:none}.brand-mark{width:40px;height:40px}.workspace{flex-direction:column;gap:16px;padding:14px 12px 96px;display:flex}.photos-panel{order:1;width:100%}.studio{order:2;width:100%}.style-panel{order:3}.photos-panel,.style-panel{width:100%;max-height:none;position:static;overflow:visible}.desktop-drop-copy,.desktop-only-copy{display:none}.mobile-only-copy{display:inline}.drop-zone>.mobile-drop-copy{display:block}.drop-zone{min-height:154px;padding:16px}.drop-zone .button{width:min(100%,240px);min-height:46px}.style-panel{display:block}.style-panel .settings-section:nth-of-type(2),.style-panel .export-card{border-left:0;padding-left:0}.stage-scroll{border-radius:22px;min-height:0;padding:10px;overflow:visible}.stage{width:min(100%, calc(550px * var(--preview-scale)));border-radius:20px;min-width:0}.studio-toolbar{padding:0 2px}.studio-toolbar h1{font-size:24px}.studio-footer{display:none}.photo-tray{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.tray-item{aspect-ratio:1/1.36;cursor:default}.tray-photo-button{border-radius:10px 10px 0 0;height:auto;bottom:42px}.tray-drag-handle{opacity:1;width:44px;height:44px;display:grid}.tray-move-actions{border-top:1px solid #dfe8eb;grid-template-columns:1fr 1fr;height:42px;display:grid;position:absolute;bottom:0;left:0;right:0}.tray-move-button{min-height:42px}.collage-drag-handle{opacity:1;border-radius:9px;width:30px;height:30px;display:grid}.tray-empty small{display:inline}.collage-drag-handle svg{width:16px;height:16px}.export-card{margin-bottom:0;position:relative}}@media (max-width:520px){.topbar-actions:before{content:"Private";color:#4d6f61;background:#eff7f2;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:750;display:inline-flex}.workspace{padding-inline:8px}.panel{border-radius:20px}.photos-panel,.style-panel{padding:17px}.stage-scroll{border-radius:18px;padding:7px}.stage{border-radius:17px;padding:7px}.stage-tip{font-size:9px}.view-actions{display:none}.photo-tray{grid-template-columns:repeat(3,minmax(0,1fr))}.field-grid-two,.color-pickers{grid-template-columns:1fr}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.title-position-wrap{grid-template-columns:88px minmax(0,1fr);gap:12px}.position-grid{width:88px}.settings-heading{flex-direction:column;align-items:flex-start;gap:2px}.settings-heading>span{text-align:left;max-width:none}.help-dialog form,.confirm-dialog form{padding:24px 20px}.dialog-buttons{flex-direction:column-reverse}.dialog-buttons .button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

