body{display:flex;min-height:100vh;flex-direction:column}.collage-hero{padding:62px 0 78px;background:radial-gradient(circle at 5% 14%,rgba(255,183,99,.16),transparent 24%),radial-gradient(circle at 94% 35%,rgba(93,54,216,.13),transparent 25%)}.intro{text-align:center}.crumbs{margin-bottom:24px;color:var(--muted);font-size:.82rem}.crumbs a{color:#5d36d8;font-weight:750}.collage-hero h1{max-width:1060px;font-size:clamp(2.8rem,7vw,5.2rem)}.collage-gradient{color:transparent;background:linear-gradient(100deg,#5d36d8 8%,#9a59e8 50%,#ff8e5e);background-clip:text;-webkit-background-clip:text}.trust-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin-top:22px;color:#565a70;font-size:.79rem;font-weight:750}.trust-row span{display:flex;align-items:center;gap:7px}.trust-row i{display:grid;width:19px;height:19px;place-items:center;border-radius:50%;color:#fff;background:#5d36d8;font-size:.62rem;font-style:normal}
.collage-studio{margin-top:46px;overflow:hidden;border:1px solid rgba(36,22,75,.13);border-radius:30px;background:rgba(255,255,255,.93);box-shadow:0 38px 110px rgba(52,32,107,.2)}.studio-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;padding:14px 20px 14px 25px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,#fff,rgba(246,242,255,.88))}.studio-title,.studio-title>span:last-child{display:flex;align-items:center}.studio-title{gap:11px}.studio-title>span:last-child{align-items:flex-start;flex-direction:column;gap:2px}.studio-title strong{font-size:.94rem}.studio-title small{color:var(--muted);font-size:.75rem}.status-dot{width:10px;height:10px;border-radius:50%;background:#1fc7a5;box-shadow:0 0 0 6px rgba(31,199,165,.12)}.studio-actions{display:flex;gap:9px}.quiet-button,.upload-button,.shuffle-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 14px;border:1px solid var(--border);border-radius:12px;font-size:.82rem;font-weight:800}.quiet-button{color:#565a70;background:#fff}.quiet-button:hover{color:#5d36d8;border-color:rgba(93,54,216,.25)}.upload-button{color:#fff;border-color:transparent;background:linear-gradient(135deg,#5d36d8,#7d53e6);box-shadow:0 10px 22px rgba(93,54,216,.22)}.upload-button:hover{transform:translateY(-1px);box-shadow:0 13px 26px rgba(93,54,216,.3)}
.studio-grid{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);min-height:780px}.control-panel{padding:26px;border-right:1px solid var(--border);background:rgba(252,251,255,.78)}.control-section+.control-section{padding-top:24px;margin-top:24px;border-top:1px solid var(--border)}.panel-heading{display:flex;align-items:center;gap:11px}.panel-heading>span:last-child{display:flex;align-items:flex-start;flex-direction:column;gap:2px}.panel-heading strong{font-size:.89rem}.panel-heading small{color:var(--muted);font-size:.72rem}.step-number{display:grid;width:29px;height:29px;place-items:center;flex:0 0 auto;border-radius:9px;color:#5d36d8;background:#ece6ff;font-size:.68rem;font-weight:900}.section-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.shuffle-button{min-height:34px;padding:0 10px;color:#5d36d8;background:#f2eeff;font-size:.72rem}.shuffle-button:hover{background:#e8e0ff}
.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.layout-option{min-width:0;padding:8px 7px 9px;border:1px solid var(--border);border-radius:12px;color:#62657c;background:#fff}.layout-option strong{display:block;margin-top:6px;font-size:.68rem}.layout-option:hover,.layout-option.active{color:#5d36d8;border-color:rgba(93,54,216,.42);background:#f8f6ff;box-shadow:0 7px 18px rgba(93,54,216,.09)}.layout-option.active{box-shadow:0 0 0 2px rgba(93,54,216,.1)}.layout-preview{display:grid;width:100%;height:40px;gap:3px}.layout-preview i{min-width:0;min-height:0;border-radius:3px;background:linear-gradient(145deg,#8f72e9,#d2c4ff)}.layout-preview.grid{grid-template:1fr 1fr/1fr 1fr}.layout-preview.hero{grid-template:1fr 1fr/1.45fr 1fr}.layout-preview.hero i:first-child{grid-row:1/3}.layout-preview.columns{grid-template-columns:repeat(3,1fr)}.layout-preview.rows{grid-template-rows:repeat(3,1fr)}.layout-preview.focus{grid-template:1fr 1fr/1fr 1.5fr 1fr}.layout-preview.focus i:nth-child(2){grid-row:1/3}.layout-preview.mosaic{grid-template:1.2fr .8fr/1.2fr .8fr}.layout-preview.mosaic i:first-child{grid-row:1/3}
.photo-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:14px}.photo-thumb,.add-thumb{position:relative;aspect-ratio:1;overflow:hidden;border:2px solid transparent;border-radius:11px;background:#edeaf6}.photo-thumb{padding:0}.photo-thumb canvas{width:100%;height:100%;object-fit:cover}.photo-thumb span{position:absolute;right:4px;bottom:4px;display:grid;width:18px;height:18px;place-items:center;border-radius:6px;color:#fff;background:rgba(17,18,35,.72);font-size:.58rem;font-weight:900}.photo-thumb:hover,.photo-thumb.active{border-color:#6e45df;box-shadow:0 0 0 3px rgba(93,54,216,.1)}.photo-thumb.dragging{opacity:.45}.add-thumb{display:grid;place-items:center;border:1px dashed rgba(93,54,216,.36);color:#5d36d8;background:#f8f6ff;font-size:1.25rem}.add-thumb:hover{background:#eee8ff}.photo-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;margin-top:9px}.photo-actions button{min-height:32px;padding:0 8px;border:1px solid var(--border);border-radius:9px;color:#60637a;background:#fff;font-size:.68rem;font-weight:750}.photo-actions button:hover:not(:disabled){color:#5d36d8;border-color:rgba(93,54,216,.3)}.photo-actions .remove{color:#aa4661}.photo-actions button:disabled{cursor:not-allowed;opacity:.43}.selected-controls{margin-top:15px;padding:14px;border:1px solid rgba(93,54,216,.1);border-radius:14px;background:#f9f7ff}.selected-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.selected-label span{color:var(--muted);font-size:.68rem;font-weight:700}.selected-label strong{max-width:170px;overflow:hidden;color:#5d36d8;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:11px}.range-control{display:grid;gap:7px}.range-control>span{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#55586d;font-size:.72rem;font-weight:750}.range-control output{color:#5d36d8;font-size:.68rem}.range-control input{width:100%;height:4px;accent-color:#6a3fda}.canvas-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:15px}.select-control,.color-control{display:grid;gap:7px;color:#55586d;font-size:.72rem;font-weight:750}.select-control select{width:100%;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:9px;color:#36384c;background:#fff;font-size:.73rem;outline:none}.color-control>span:last-child{display:flex;align-items:center;height:36px;padding:4px;border:1px solid var(--border);border-radius:9px;background:#fff}.color-control input{width:31px;height:26px;padding:0;border:0;border-radius:6px;background:transparent}.color-control b{padding-left:7px;color:#5b5d72;font-size:.68rem;letter-spacing:.03em}
.preview-panel{display:flex;min-width:0;flex-direction:column;padding:26px;background:radial-gradient(circle at 80% 14%,rgba(255,153,112,.12),transparent 30%),linear-gradient(145deg,#f5f1ff,#ece8f7)}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.preview-heading>div{display:flex;align-items:center;gap:11px}.preview-heading>div>span:last-child{display:flex;align-items:flex-start;flex-direction:column;gap:2px}.preview-heading strong{font-size:.9rem}.preview-heading small{color:var(--muted);font-size:.72rem}.live-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;color:#147c69;background:rgba(31,199,165,.12);font-size:.61rem;font-weight:900;letter-spacing:.08em}.live-badge i{width:6px;height:6px;border-radius:50%;background:#1fc7a5;box-shadow:0 0 0 4px rgba(31,199,165,.13)}.canvas-stage{position:relative;display:grid;flex:1;min-height:510px;place-items:center;overflow:hidden;border:1px solid rgba(69,48,116,.12);border-radius:24px;background-color:#ded9ea;background-image:linear-gradient(45deg,#d4cedf 25%,transparent 25%),linear-gradient(-45deg,#d4cedf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4cedf 75%),linear-gradient(-45deg,transparent 75%,#d4cedf 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;cursor:pointer;box-shadow:inset 0 0 0 9px rgba(255,255,255,.32),0 24px 54px rgba(49,32,96,.15)}.canvas-stage:focus-within{outline:3px solid rgba(93,54,216,.25);outline-offset:2px}.canvas-stage canvas{display:block;max-width:calc(100% - 44px);max-height:520px;width:auto;height:auto;border-radius:3px;box-shadow:0 26px 60px rgba(36,24,69,.25);transition:transform .24s}.canvas-stage:hover canvas{transform:scale(1.008)}.canvas-stage.drag-over{box-shadow:inset 0 0 0 4px #6d43de,0 24px 54px rgba(49,32,96,.2)}.drop-overlay{position:absolute;inset:18px;display:none;place-items:center;align-content:center;gap:7px;border:2px dashed rgba(255,255,255,.8);border-radius:18px;color:#fff;background:rgba(65,39,128,.86);text-align:center;backdrop-filter:blur(7px)}.drag-over .drop-overlay{display:grid}.drop-icon{display:grid;width:52px;height:52px;margin-bottom:4px;place-items:center;border-radius:16px;color:#5d36d8;background:#fff;font-size:1.8rem}.drop-overlay small{color:rgba(255,255,255,.77)}.stage-hint{position:absolute;right:18px;bottom:17px;padding:7px 10px;border-radius:9px;color:#fff;background:rgba(25,21,42,.68);font-size:.65rem;font-weight:750;opacity:0;transition:.2s;pointer-events:none}.canvas-stage:hover .stage-hint{opacity:1}.sparkle{position:absolute;color:#fff;text-shadow:0 4px 15px rgba(93,54,216,.4);pointer-events:none}.sparkle.one{top:14%;right:9%;font-size:1.4rem;animation:float-sparkle 3.1s ease-in-out infinite}.sparkle.two{left:8%;bottom:15%;font-size:.82rem;animation:float-sparkle 3.1s .8s ease-in-out infinite}.canvas-stage.rendering canvas{animation:canvas-pop .34s ease}.export-bar{display:grid;grid-template-columns:auto minmax(100px,.72fr) minmax(200px,1.2fr);gap:12px;align-items:end;margin-top:17px;padding:14px;border:1px solid rgba(69,48,116,.1);border-radius:17px;background:rgba(255,255,255,.78)}.export-bar label{display:grid;gap:6px;color:#55586d;font-size:.68rem;font-weight:750}.export-bar select{height:42px;padding:0 28px 0 11px;border:1px solid var(--border);border-radius:11px;background:#fff}.quality-field input{width:100%;accent-color:#6a3fda}.download-button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:0 17px;border:0;border-radius:13px;color:#fff;background:linear-gradient(135deg,#5d36d8,#8a55e4 60%,#bf68c9);box-shadow:0 12px 25px rgba(93,54,216,.25);font-weight:850}.download-button:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(93,54,216,.34)}.download-button b{display:grid;width:27px;height:27px;place-items:center;border-radius:9px;background:rgba(255,255,255,.16)}.local-note{margin:12px 0 0;color:#73758a;font-size:.69rem;text-align:center}
.content-section{padding:82px 0}.content-section.alt{background:rgba(255,255,255,.5);border-block:1px solid rgba(31,34,62,.06)}.content{max-width:1040px;text-align:center}.section-kicker{display:inline-flex;margin-bottom:10px;color:#6b3fd7;font-size:.75rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.content h2{max-width:760px;margin:0 auto 14px;font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.05;letter-spacing:-.05em}.content>p,.occasion-copy p{max-width:750px;margin:0 auto;color:var(--muted);line-height:1.75}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;text-align:left}.benefit-card{padding:27px;border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.86);box-shadow:0 13px 35px rgba(52,35,99,.07)}.benefit-card.featured{color:#fff;border-color:transparent;background:linear-gradient(145deg,#4e2bbc,#7c4ce1 65%,#a65bcc);box-shadow:0 20px 46px rgba(93,54,216,.25)}.benefit-icon{display:grid;width:45px;height:45px;margin-bottom:18px;place-items:center;border-radius:14px;color:#5d36d8;background:#eee9ff;font-size:.9rem;font-weight:900}.featured .benefit-icon{color:#fff;background:rgba(255,255,255,.16)}.benefit-card h3{margin:0 0 8px;font-size:1.05rem}.benefit-card p{margin:0;color:var(--muted);font-size:.89rem;line-height:1.65}.benefit-card.featured p{color:rgba(255,255,255,.78)}.prose-content{max-width:860px}.steps{display:grid;gap:14px;padding:0;margin:34px 0 0;list-style:none;text-align:left}.steps li{display:flex;gap:17px;padding:20px 22px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.76)}.steps li>span{display:grid;width:38px;height:38px;place-items:center;flex:0 0 auto;border-radius:12px;color:#fff;background:linear-gradient(135deg,#5d36d8,#8f62e7);font-weight:900}.steps strong{display:block;margin:1px 0 5px}.steps p{margin:0;color:var(--muted);font-size:.89rem;line-height:1.6}.occasions{overflow:hidden;background:linear-gradient(140deg,#241844,#443080 58%,#704fa1);color:#fff}.occasions .content{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:center;text-align:left}.occasion-copy h2{margin-inline:0}.occasion-copy p{color:rgba(255,255,255,.72)}.occasions .section-kicker{color:#dfd2ff}.occasion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.occasion-grid article{padding:10px 10px 16px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.08);box-shadow:0 16px 30px rgba(15,9,32,.2);transform:rotate(-2deg)}.occasion-grid article:nth-child(2){transform:translateY(-10px) rotate(2deg)}.occasion-grid article:nth-child(3){transform:rotate(1deg)}.occasion-art{display:grid;height:165px;gap:5px;padding:6px;margin-bottom:13px;border-radius:12px;background:#eee7fc}.occasion-art i{display:block;border-radius:7px}.occasion-art.travel{grid-template:1fr 1fr/1.2fr .8fr}.occasion-art.travel i:first-child{grid-row:1/3;background:linear-gradient(145deg,#ef9a66,#654cc4)}.occasion-art.travel i:nth-child(2){background:#69b7ba}.occasion-art.travel i:nth-child(3){background:#f3c26f}.occasion-art.social{grid-template-rows:1.3fr .7fr}.occasion-art.social i:first-child{background:linear-gradient(150deg,#5142b9,#e97a9c)}.occasion-art.social i:nth-child(2),.occasion-art.social i:nth-child(3){display:none}.occasion-art.mood{grid-template:1fr 1fr/1fr 1fr}.occasion-art.mood i:first-child{background:#ed9b80}.occasion-art.mood i:nth-child(2){background:#6877bb}.occasion-art.mood i:nth-child(3){grid-column:1/3;background:#bda1cc}.occasion-grid strong,.occasion-grid small{display:block;padding:0 4px}.occasion-grid strong{font-size:.86rem}.occasion-grid small{margin-top:4px;color:rgba(255,255,255,.64);font-size:.68rem;line-height:1.45}.faq{max-width:860px;margin:34px auto 0;text-align:left}.faq details{border-bottom:1px solid var(--border)}.faq summary{padding:19px 4px;cursor:pointer;font-weight:800;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";float:right;color:#5d36d8;font-size:1.2rem}.faq details[open] summary:after{content:"−"}.faq p{margin:0;padding:0 35px 20px 4px;color:var(--muted);line-height:1.7}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;text-align:left}.try-card{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid var(--border);border-radius:18px;background:#fff;transition:.2s}.try-card:hover{transform:translateY(-3px);border-color:rgba(93,54,216,.25);box-shadow:0 15px 34px rgba(52,35,99,.1)}.try-icon{display:grid;width:46px;height:46px;place-items:center;flex:0 0 auto;border-radius:13px;color:#5d36d8;background:#eee9ff;font-size:.72rem;font-weight:900}.try-card>span:nth-child(2){min-width:0;flex:1}.try-card strong,.try-card>span:nth-child(2)>span{display:block}.try-card strong{font-size:.86rem}.try-card>span:nth-child(2)>span{margin-top:4px;color:var(--muted);font-size:.71rem;line-height:1.45}.try-card b{color:#6a3fda;font-size:1.05rem}.toast{position:fixed;right:24px;bottom:24px;z-index:100;display:flex;align-items:center;gap:11px;min-width:270px;padding:14px 16px;border:1px solid rgba(93,54,216,.15);border-radius:15px;background:rgba(255,255,255,.96);box-shadow:0 20px 55px rgba(41,27,80,.2);opacity:0;transform:translateY(18px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.toast>span{display:grid;width:31px;height:31px;place-items:center;border-radius:10px;color:#fff;background:#21b995}.toast strong,.toast small{display:block}.toast strong{font-size:.82rem}.toast small{margin-top:2px;color:var(--muted);font-size:.7rem}
@keyframes float-sparkle{0%,100%{transform:translateY(0) rotate(0);opacity:.6}50%{transform:translateY(-9px) rotate(18deg);opacity:1}}@keyframes canvas-pop{0%{transform:scale(.985);filter:saturate(.8)}100%{transform:scale(1);filter:saturate(1)}}
@media(max-width:1000px){.studio-grid{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--border)}.preview-panel{min-height:720px}.occasions .content{grid-template-columns:1fr;text-align:center}.occasion-copy h2{margin-inline:auto}.occasion-grid{max-width:650px;margin-inline:auto}.benefit-grid,.try-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.collage-hero{padding:44px 0 58px}.studio-bar{align-items:flex-start;flex-direction:column;padding:17px}.studio-actions{width:100%}.studio-actions button{flex:1}.control-panel,.preview-panel{padding:18px}.canvas-stage{min-height:440px}.export-bar{grid-template-columns:1fr 1fr}.download-button{grid-column:1/-1}.benefit-grid,.try-grid{grid-template-columns:1fr}.occasion-grid{grid-template-columns:repeat(3,1fr)}.content-section{padding:62px 0}}
@media(max-width:540px){.collage-studio{margin-top:34px;border-radius:22px}.collage-hero h1{font-size:clamp(2.5rem,14vw,4rem)}.layout-grid{grid-template-columns:repeat(3,1fr)}.photo-strip{grid-template-columns:repeat(4,1fr)}.canvas-controls{grid-template-columns:1fr}.position-grid{grid-template-columns:1fr}.canvas-stage{min-height:360px}.canvas-stage canvas{max-width:calc(100% - 24px);max-height:420px}.preview-panel{min-height:580px}.occasion-grid{grid-template-columns:1fr}.occasion-grid article:nth-child(n){display:grid;grid-template-columns:110px 1fr;align-items:center;text-align:left;transform:none}.occasion-art{grid-row:1/3;width:100px;height:92px;margin:0}.trust-row{align-items:center;flex-direction:column}.toast{right:12px;bottom:12px;left:12px;min-width:0}}
@media(prefers-reduced-motion:reduce){.sparkle,.canvas-stage.rendering canvas{animation:none}.canvas-stage canvas,.try-card,.download-button,.upload-button{transition:none}}