.collage-page{--collage:#db4f73;--collage-2:#e99c37;--collage-ink:#5e3151;--collage-wash:#db4f7314}.collage-hero{border:1px solid var(--border);background:radial-gradient(circle at 82% 22%, #e99c372b, transparent 31%), radial-gradient(circle at 66% 100%, #db4f7324, transparent 34%), var(--bg-raised);border-radius:28px;margin:1rem 0 1.35rem;padding:2.8rem clamp(1.2rem,5vw,3.6rem);position:relative;overflow:hidden}.collage-hero>span{color:var(--collage);font:750 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase}.collage-hero h1{letter-spacing:-.052em;max-width:760px;margin:.6rem 0 .7rem;font-size:clamp(2.3rem,5.4vw,4.5rem);line-height:1}.collage-hero p{max-width:700px;color:var(--text-muted);margin:0;font-size:clamp(.92rem,1.6vw,1.08rem);line-height:1.7}.collage-hero>div{grid-template-rows:72px 58px;grid-template-columns:82px 62px;gap:7px;width:151px;display:grid;position:absolute;bottom:-25px;right:5%;transform:rotate(7deg)}.collage-hero>div i{background:linear-gradient(145deg,#db4f73a6,#e99c37bf);border:5px solid #fff;border-radius:7px;box-shadow:0 12px 28px #47233026}.collage-hero>div i:first-child{grid-row:span 2}.collage-hero>div i:nth-child(3){background:linear-gradient(145deg,#6b79b8,#c3b4dc)}.collage-hero>div i:nth-child(4){background:#e6c56e;width:42px;height:42px;position:absolute;top:-20px;right:8px;transform:rotate(-14deg)}.collage-drop{background:radial-gradient(circle at center, var(--collage-wash), transparent 52%), var(--bg-raised);text-align:center;cursor:pointer;border:1.5px dashed #db4f7366;border-radius:26px;place-items:center;min-height:370px;padding:2rem;transition:all .18s;display:grid}.collage-drop:hover,.collage-drop.is-over{border-color:var(--collage);transform:translateY(-2px)}.collage-drop-stack{width:110px;height:92px;margin-bottom:.8rem;position:relative}.collage-drop-stack i{background:linear-gradient(145deg,#ba6e89,#e8ab67);border:4px solid #fff;border-radius:10px;width:62px;height:72px;position:absolute;top:5px;left:22px;box-shadow:0 14px 30px #5f27402e}.collage-drop-stack i:first-child{opacity:.65;transform:rotate(-12deg)translate(-16px)}.collage-drop-stack i:nth-child(2){opacity:.82;transform:rotate(9deg)translate(17px)}.collage-drop-stack i:nth-child(3){background:linear-gradient(145deg, var(--collage), var(--collage-2))}.collage-drop-stack b{border:3px solid var(--bg-raised);background:var(--collage-ink);color:#fff;border-radius:50%;place-items:center;width:31px;height:31px;font-size:1.1rem;display:grid;position:absolute;bottom:1px;right:1px}.collage-drop>strong{font-size:1.25rem}.collage-drop>span:not(.collage-drop-stack){background:var(--collage);color:#fff;border-radius:999px;margin-top:.65rem;padding:.68rem 1rem;font-size:.76rem;font-weight:760}.collage-drop>small{color:var(--text-muted);margin-top:.65rem;font-size:.68rem}.collage-drop>em{color:var(--text-muted);margin-top:.35rem;font-size:.62rem;font-style:normal}.collage-workspace{border:1px solid var(--border);background:var(--bg-raised);border-radius:25px;overflow:hidden;box-shadow:0 24px 70px #4222311c}.collage-bar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;display:flex}.collage-bar span{color:var(--collage);font:720 .58rem var(--mono);letter-spacing:.1em;display:block}.collage-bar strong{margin-top:.2rem;font-size:.77rem;display:block}.collage-bar button,.collage-layout-block header button{border:1px solid var(--border);background:var(--bg-subtle);color:var(--text);cursor:pointer;border-radius:9px;padding:.5rem .7rem;font-size:.67rem;font-weight:700}.collage-editor{grid-template-columns:minmax(0,1fr) 285px;display:grid}.collage-stage-column{min-width:0;padding:1rem}.collage-stage{background:repeating-conic-gradient(#7c6e750f 0 25%, transparent 0 50%) 50%/24px 24px, var(--bg-subtle);border-radius:18px;place-items:center;min-height:430px;max-height:660px;padding:1rem;display:grid;position:relative;overflow:hidden}.collage-stage canvas{cursor:pointer;border-radius:3px;outline:none;max-width:100%;max-height:620px;display:block;box-shadow:0 18px 45px #24161d33}.collage-stage canvas:focus-visible{box-shadow:0 0 0 3px #db4f734d,0 18px 45px #24161d33}.collage-canvas-size{color:#fff;font:.58rem var(--mono);backdrop-filter:blur(6px);background:#171417b8;border-radius:6px;padding:.3rem .42rem;position:absolute;bottom:.7rem;right:.7rem}.collage-layout-block{margin-top:1rem}.collage-layout-block header{justify-content:space-between;align-items:end;gap:1rem;display:flex}.collage-layout-block header strong,.collage-photos-block>strong{font-size:.8rem;display:block}.collage-layout-block header span{color:var(--text-muted);margin-top:.25rem;font-size:.64rem;display:block}.collage-layouts{grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem;margin-top:.65rem;display:grid}.collage-layouts>button{border:1px solid var(--border);background:var(--bg-raised);min-width:0;color:var(--text);cursor:pointer;border-radius:11px;padding:.42rem}.collage-layouts>button[aria-pressed=true]{background:var(--collage-wash);border-color:#db4f73a6;box-shadow:inset 0 0 0 1px #db4f7329}.collage-layouts>button>span{background:var(--bg-subtle);border-radius:6px;height:50px;display:block;position:relative;overflow:hidden}.collage-layouts i{border:1.5px solid var(--bg-raised);background:color-mix(in srgb, var(--collage) 60%, var(--collage-2));position:absolute}.collage-layouts em{text-overflow:ellipsis;white-space:nowrap;margin-top:.35rem;font-size:.55rem;font-style:normal;display:block;overflow:hidden}.collage-photos-block{margin-top:1rem}.collage-photo-strip{scrollbar-width:thin;grid-auto-columns:94px;grid-auto-flow:column;gap:.45rem;margin-top:.55rem;padding-bottom:.35rem;display:grid;overflow-x:auto}.collage-photo-strip article{border:1px solid var(--border);background:var(--bg-raised);border-radius:11px;padding:.35rem}.collage-photo-strip article.is-selected{border-color:var(--collage);box-shadow:inset 0 0 0 1px #db4f7333}.collage-photo-select{background:var(--bg-subtle);cursor:pointer;border:0;border-radius:7px;width:100%;height:68px;padding:0;position:relative;overflow:hidden}.collage-photo-select img{object-fit:cover;width:100%;height:100%}.collage-photo-select span{color:#fff;width:19px;height:19px;font:.57rem var(--mono);background:#141214b8;border-radius:50%;place-items:center;display:grid;position:absolute;top:.25rem;left:.25rem}.collage-photo-strip article>div{grid-template-columns:repeat(3,1fr);gap:.2rem;margin-top:.3rem;display:grid}.collage-photo-strip article>div button{background:var(--bg-subtle);color:var(--text-muted);cursor:pointer;border:0;border-radius:5px;padding:.25rem}.collage-photo-strip article>div button:last-child{color:var(--danger)}.collage-photo-strip article>div button:disabled{opacity:.25}.collage-controls{border-left:1px solid var(--border);background:linear-gradient(180deg, var(--bg-subtle), var(--bg-raised))}.collage-controls>section{border-bottom:1px solid var(--border);padding:1rem}.collage-controls>section:last-child{border-bottom:0}.collage-controls h2{margin:0 0 .7rem;font-size:.86rem}.collage-controls label{margin-top:.7rem;display:block}.collage-controls label>span:first-child{justify-content:space-between;margin-bottom:.32rem;font-size:.65rem;font-weight:700;display:flex}.collage-controls select{border:1px solid var(--border);background:var(--bg-raised);width:100%;color:var(--text);border-radius:9px;padding:.58rem}.collage-range input{width:100%;accent-color:var(--collage)}.collage-range output{color:var(--collage);font:650 .61rem var(--mono)}.collage-color>span:last-child{border:1px solid var(--border);background:var(--bg-raised);border-radius:9px;align-items:center;gap:.5rem;padding:.42rem;display:flex}.collage-color input{cursor:pointer;background:0 0;border:0;width:32px;height:26px;padding:0}.collage-color code{color:var(--text-muted);font-size:.62rem}.collage-focus-controls p{color:var(--text-muted);margin:-.35rem 0 .5rem;font-size:.61rem;line-height:1.45}.collage-focus-controls button{border:1px solid var(--border);background:var(--bg-raised);width:100%;color:var(--text);cursor:pointer;border-radius:8px;margin-top:.7rem;padding:.5rem;font-size:.64rem}.collage-primary{background:linear-gradient(135deg, var(--collage), #ec7b55);color:#fff;cursor:pointer;border:0;border-radius:11px;width:100%;margin-top:1rem;padding:.78rem;font-weight:780;box-shadow:0 12px 25px #db4f7340}.collage-primary:disabled{cursor:wait;opacity:.7}.collage-error{color:var(--danger);margin:.65rem 0 0;font-size:.66rem;line-height:1.45}.collage-privacy{color:var(--text-muted);justify-content:center;align-items:center;gap:.42rem;margin:.8rem 0 0;font-size:.67rem;display:flex}.collage-privacy span{width:18px;height:18px;color:var(--collage);background:#db4f731a;border-radius:50%;place-items:center;font-weight:800;display:grid}.collage-result{border:1px solid var(--border);background:var(--bg-raised);border-radius:20px;grid-template-columns:minmax(220px,.85fr) 1.15fr;gap:1.2rem;margin-top:1.1rem;padding:1rem;display:grid}.collage-result>div:first-child{background:var(--bg-subtle);border-radius:13px;place-items:center;min-height:190px;max-height:380px;display:grid;overflow:hidden}.collage-result img{object-fit:contain;max-width:100%;max-height:380px}.collage-result>div:last-child{align-self:center}.collage-result>div:last-child>span{color:var(--collage);font:740 .65rem var(--mono)}.collage-result>div:last-child>strong{margin-top:.35rem;display:block}.collage-result>div:last-child>div{flex-wrap:wrap;gap:.45rem;margin-top:.9rem;display:flex}.collage-result a,.collage-result button{border:1px solid var(--border);background:var(--bg-subtle);color:var(--text);cursor:pointer;border-radius:9px;padding:.58rem .7rem;font-size:.66rem;font-weight:700;text-decoration:none}.collage-result a{border-color:var(--collage);background:var(--collage);color:#fff}.collage-proof{margin-top:3rem}.collage-proof>div:first-child span{color:var(--collage);font:730 .65rem var(--mono);letter-spacing:.08em}.collage-proof h2{max-width:700px;margin:.4rem 0 1rem}.collage-proof>div:last-child{grid-template-columns:repeat(3,1fr);gap:.7rem;display:grid}.collage-proof article{border:1px solid var(--border);background:var(--bg-raised);border-radius:15px;padding:1.1rem}.collage-proof article>span{color:var(--collage);font:750 .62rem var(--mono)}.collage-proof h3{margin:.55rem 0 .35rem;font-size:.9rem}.collage-proof p{color:var(--text-muted);margin:0;font-size:.75rem;line-height:1.58}.collage-detail{max-width:800px}@media (prefers-color-scheme:dark){.collage-page{--collage:#f17496;--collage-2:#f0b25e;--collage-ink:#f17496;--collage-wash:#f174961a}.collage-workspace{box-shadow:0 24px 70px #00000047}}@media (width<=900px){.collage-editor{grid-template-columns:1fr}.collage-controls{border-top:1px solid var(--border);border-left:0;grid-template-columns:repeat(3,1fr);display:grid}.collage-controls>section{border-right:1px solid var(--border);border-bottom:0}.collage-controls>section:last-child{border-right:0}.collage-layouts{grid-template-columns:repeat(3,1fr)}.collage-hero>div{opacity:.5}}@media (width<=620px){.collage-hero{border-radius:21px;padding:2.3rem 1.15rem}.collage-hero>div{display:none}.collage-drop{border-radius:20px;min-height:310px}.collage-workspace{border-radius:20px}.collage-stage-column{padding:.7rem}.collage-stage{border-radius:13px;min-height:320px;max-height:560px;padding:.6rem}.collage-stage canvas{max-height:530px}.collage-layout-block header{flex-direction:column;align-items:flex-start}.collage-layouts{grid-template-columns:repeat(3,minmax(0,1fr))}.collage-layouts>button>span{height:42px}.collage-controls{grid-template-columns:1fr}.collage-controls>section{border-right:0;border-bottom:1px solid var(--border)}.collage-result{grid-template-columns:1fr}.collage-result>div:last-child>div>*{text-align:center;flex:42%}.collage-proof>div:last-child{grid-template-columns:1fr}}.collage-bar button,.collage-layout-block header button,.collage-photo-strip article>div button,.collage-controls select,.collage-color>span:last-child,.collage-focus-controls button,.collage-primary,.collage-result a,.collage-result button{min-height:44px}.collage-photo-strip article>div button{min-width:44px}.collage-result a,.collage-result button{justify-content:center;align-items:center;display:inline-flex}@media (width<=620px){.collage-photo-strip{grid-auto-columns:152px}.collage-photo-strip article>div{grid-template-columns:repeat(3,minmax(44px,1fr))}}