@font-face{font-family:TitleFont;src:url(/assets/fonts/title-font.otf)format("opentype");font-display:swap}@font-face{font-family:Brand;src:url(/assets/fonts/Brand.otf)format("opentype");font-display:swap}:root{color:#395042f5;text-rendering:geometricprecision;background:#9bdcf0;font-family:Noto Sans TC,Noto Sans CJK TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow:auto}button,input,select{font:inherit}button{color:inherit;cursor:pointer;border:0}button:disabled,input:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:4px;outline:2px solid #ffeca7f5;box-shadow:0 0 0 7px #ffffff24}.butter-stage{--night-opacity:0;--ink:#395042f5;--ink-soft:#395042d1;--ink-muted:#395042a3;--button-ink:#323d5ce0;--glass-fill-a:#f2fcf8a8;--glass-fill-b:#e2f5ef47;--glass-tint:#b8e0db70;--glass-blur:34px;background:#9bdcf0;min-height:100vh;padding:34px;position:relative;overflow:hidden}.bg-photo,.bg-paint,.night-filter,.aura,.bubbles,.grain{pointer-events:none;position:absolute;inset:0}.bg-photo{z-index:0;filter:saturate(1.14)contrast(1.02);background-image:url(/assets/background/meadow.jpg),linear-gradient(#71cef2 0%,#bff3ff 39%,#69bf5b 100%);background-position:50%;background-size:cover,auto}.bg-paint{z-index:1;opacity:.84;mix-blend-mode:soft-light;background:radial-gradient(at 25% 76%,#125e3c6b 0 11%,#0000 30%),radial-gradient(at 78% 78%,#1a8f3757 0 15%,#0000 35%),radial-gradient(circle at 18% 84%,#ff71b2d1 0 .35%,#0000 1.2%),radial-gradient(circle at 29% 80%,#ffc446e6 0 .36%,#0000 1.25%),radial-gradient(circle at 58% 83%,#ff7ebec7 0 .32%,#0000 1.2%),radial-gradient(circle at 75% 79%,#ffaa3fd1 0 .34%,#0000 1.22%),linear-gradient(#0000 66%,#004a2542)}.night-filter{z-index:2;opacity:var(--night-opacity);background:#000;transition:opacity .9s}.aura{z-index:3;mix-blend-mode:screen;background:radial-gradient(circle at 22% 14%,#fff1bc57,#0000 18%),radial-gradient(circle at 72% 20%,#ffe5f557,#0000 17%),radial-gradient(circle at 82% 74%,#74c0ff47,#0000 21%),linear-gradient(#ffffff1f,#fff0)}.bubbles{z-index:5}.bubbles i{aspect-ratio:1;opacity:.64;filter:brightness(1.05)contrast(.98)saturate(1.12);mix-blend-mode:screen;width:clamp(70px,9vw,150px);animation:bubble-drift var(--dur,28s) ease-in-out infinite alternate;background:url(/assets/bubble.png) 50%/contain no-repeat;position:absolute}.bubbles i:first-child{--dur:13s;--dx:76px;--dy:-58px;--rot:12deg;top:4%;left:5%;transform:scale(.55)}.bubbles i:nth-child(2){--dur:14.5s;--dx:-72px;--dy:64px;--rot:-14deg;top:7%;left:82%;transform:scale(.38)}.bubbles i:nth-child(3){--dur:16s;--dx:-94px;--dy:-44px;--rot:18deg;top:22%;left:91%;transform:scale(.82)}.bubbles i:nth-child(4){--dur:14s;--dx:68px;--dy:78px;--rot:-10deg;top:30%;left:66%;transform:scale(.42)}.bubbles i:nth-child(5){--dur:17s;--dx:92px;--dy:-66px;--rot:14deg;opacity:.32;top:70%;left:4%;transform:scale(.88)}.bubbles i:nth-child(6){--dur:15.5s;--dx:-78px;--dy:-74px;--rot:-18deg;top:84%;left:55%;transform:scale(.48)}.bubbles i:nth-child(7){--dur:18s;--dx:-106px;--dy:58px;--rot:20deg;opacity:.3;top:75%;left:86%;transform:scale(1.04)}.bubbles i:nth-child(8){--dur:13.5s;--dx:62px;--dy:-82px;--rot:-12deg;top:68%;left:35%;transform:scale(.34)}.bubbles i:nth-child(9){--dur:16.5s;--dx:-68px;--dy:-68px;--rot:16deg;top:50%;left:74%;transform:scale(.54)}@keyframes bubble-drift{0%{translate:0;rotate:0deg}to{translate:var(--dx) var(--dy);rotate:var(--rot)}}.grain{z-index:4;opacity:.1;mix-blend-mode:overlay;background-image:radial-gradient(circle at 20% 30%,#ffffffd1 0 1px,#0000 1px),radial-gradient(circle at 72% 61%,#244a3885 0 1px,#0000 1px);background-size:4px 4px,6px 6px}.glass-card{background:linear-gradient(135deg, var(--glass-fill-a), var(--glass-fill-b) 47%, #ffddf429), var(--glass-tint);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.22);backdrop-filter:blur(var(--glass-blur)) saturate(1.22);border:1px solid #ffffff85;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffc7,inset 0 -1px #ffffff2e,0 28px 80px #13306038}.glass-card:before{content:"";border-radius:inherit;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 18% 7%,#ffffff94,#0000 19%),radial-gradient(circle at 80% 86%,#ffc9f04d,#0000 26%),linear-gradient(145deg,#ffffff3d,#0000 45%);position:absolute;inset:1px}.collage-hero,.collage-workspace{z-index:6;width:min(1460px,100vw - 72px);margin-inline:auto;position:relative}.collage-hero{border-radius:clamp(32px,4vw,54px);justify-content:space-between;align-items:center;gap:22px;min-height:clamp(220px,20vw,330px);margin-bottom:18px;padding:clamp(24px,3vw,38px);display:flex}.hero-copy{z-index:2;min-width:0;position:relative}.brand{color:var(--ink-muted);letter-spacing:.46em;text-indent:.46em;margin:0 0 clamp(8px,1.2vw,18px);font-size:.82rem;font-weight:400}h1,h2,p{margin:0}h1{color:var(--ink);letter-spacing:0;text-shadow:0 1px #5d44261f,0 18px 44px #22325c2e;font-family:Brand,Noto Sans TC,PingFang TC,sans-serif;font-size:clamp(5rem,13vw,12rem);font-weight:400;line-height:.86}h2{color:var(--ink);font-size:1.12rem;font-weight:480;line-height:1.3}.eyebrow{color:var(--ink-muted);letter-spacing:.18em;text-transform:uppercase;margin:0 0 7px;font-size:.74rem;font-weight:520}.glass-button,.preview-actions button{min-height:58px;color:var(--ink-soft);background:linear-gradient(135deg,#ffffff61,#ffffff1a),#ffffff1f;border:1px solid #ffffff8a;border-radius:999px;justify-content:center;align-items:center;gap:12px;font-weight:350;line-height:1.2;transition:transform .18s,box-shadow .18s,background .18s;display:inline-flex;box-shadow:inset 0 1px #ffffffb8,inset 0 -12px 28px #ffffff14,0 18px 30px #1f3e6724}.glass-button:hover:not(:disabled),.preview-actions button:hover:not(:disabled),.segmented button:hover,.preview-actions button:hover{transform:translateY(-2px)}.primary{color:var(--button-ink);background:radial-gradient(circle at 20% 20%,#ffe68961,#0000 36%),linear-gradient(135deg,#5073e257,#ffffff26);box-shadow:inset 0 0 0 1px #ffe7a67a,inset 0 1px #ffffffc7,0 0 28px #ffca6529,0 18px 34px #182d622e}.export-button{z-index:2;min-width:138px;padding:0 26px;font-size:1.08rem;position:relative}.collage-workspace{grid-template-columns:minmax(300px,420px) minmax(680px,1fr);align-items:start;gap:16px;display:grid}.control-panel{grid-template-columns:1fr;gap:14px;display:grid}.drop-zone{z-index:2;min-height:238px;color:var(--ink);text-align:center;cursor:default;background:radial-gradient(circle at 50% 0,#fff6c575,#0000 40%),#ffffff29;border:1px dashed #ffffffbd;border-radius:34px;align-content:center;justify-items:center;gap:10px;padding:28px;transition:transform .18s,background .18s,border-color .18s;display:grid;position:relative;box-shadow:inset 0 1px 38px #fff3,0 20px 64px #1330602e}.drop-zone.active{background:radial-gradient(circle at 50% 0,#fff6c5a8,#0000 42%),#ffffff38;border-color:#ffeea6f5;transform:translateY(-2px)}.drop-icon{width:76px;height:76px;color:var(--button-ink);background:linear-gradient(135deg,#ffffffc7,#ffeedc57),#ffffff4d;border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 1px #ffffffc7,0 18px 34px #1f3e6721}.drop-zone strong{font-size:1.18rem;font-weight:420}.upload-button{min-width:190px;min-height:50px;margin-top:6px;padding:0 20px}.desktop-drop-note{opacity:.78}.drop-zone small,.range-field span,.field span{color:var(--ink-muted);font-size:.9rem;line-height:1.5}.drop-zone.has-preview{align-content:stretch;justify-items:stretch;min-height:520px;padding:20px}.drop-preview-head{text-align:left;justify-content:space-between;align-items:flex-start;gap:16px;min-width:0;display:flex}.drop-preview-head span{gap:5px;min-width:0;display:grid}.drop-preview-head small{letter-spacing:.18em;text-transform:uppercase}.drop-preview-head strong{color:var(--ink);font-size:1.08rem;line-height:1.35}.drop-preview-head em{max-width:420px;color:var(--ink-muted);text-align:right;font-size:.9rem;font-style:normal;line-height:1.5}.preview-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex!important}.preview-actions button{min-height:36px;padding:0 12px;font-size:.86rem}.drop-canvas-stage{scrollbar-color:#39504257 transparent;background:linear-gradient(45deg,#ffffff38 25%,#0000 25% 75%,#ffffff38 75%) 0 0/22px 22px,linear-gradient(45deg,#ffffff38 25%,#0000 25% 75%,#ffffff38 75%) 11px 11px/22px 22px,#ffffff1f;border:1px solid #ffffff61;border-radius:28px;place-items:center;min-height:410px;padding:20px;display:grid;overflow:auto}.drop-canvas-stage::-webkit-scrollbar{width:10px;height:10px}.drop-canvas-stage::-webkit-scrollbar-track{background:0 0}.drop-canvas-stage::-webkit-scrollbar-thumb{background:#39504257;border-radius:999px}.drop-canvas-stage canvas{cursor:grab;touch-action:none;border-radius:10px;max-width:100%;height:auto;display:block;box-shadow:0 28px 70px #13306042}.preview-canvas-wrap{flex:none;display:block;position:relative}.preview-canvas-wrap canvas{max-width:none;width:100%!important;height:100%!important}.preview-delete{z-index:3;color:#395042d1;background:linear-gradient(135deg,#ffffffe0,#ffffff7a),#ffffffb3;border:1px solid #ffffffbd;border-radius:50%;place-items:center;width:34px;height:34px;transition:transform .16s,color .16s,background .16s;display:grid;position:absolute;translate:-50%;box-shadow:inset 0 1px #fffc,0 12px 26px #1f3e672e}.preview-delete:hover{color:#323d5cf5;background:radial-gradient(circle at 25% 20%,#ffeca7b3,#0000 42%),#ffffffe0;transform:translateY(-1px)}.drop-canvas-stage canvas.is-dragging,.drop-canvas-stage canvas:active{cursor:grabbing}.drop-hint{color:var(--ink-muted);font-size:.9rem;line-height:1.45}.panel-block{border-radius:28px;gap:12px;padding:18px;display:grid}.panel-block>*{z-index:2;position:relative}.compact-block{gap:11px}.compact-block .export-button{width:100%;margin-top:4px}.secondary-export{background:linear-gradient(135deg,#ffffff4d,#ffffff14),#ffffff14;min-height:50px}.block-title{color:var(--ink-soft);align-items:center;gap:10px;display:flex}.segmented{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;display:grid}.shadow-target,.image-fit-control{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-export-label{display:none}.corner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shadow-target.disabled{opacity:.55}.segmented button,.swatches button{color:var(--ink-soft);background:#ffffff24;border:1px solid #fff6;transition:background .16s,transform .16s,box-shadow .16s;box-shadow:inset 0 1px #ffffff5c}.segmented button{border-radius:16px;min-height:46px;font-size:.93rem;font-weight:350}.segmented button.selected,.swatches button.selected{color:var(--button-ink);background:radial-gradient(circle at 22% 18%,#fff6c5e6,#0000 34%),linear-gradient(135deg,#ffffffa8,#fff0b942),#ffffff52;border-color:#fff4bfeb;box-shadow:inset 0 0 0 1px #ffffff94,inset 0 0 24px #ffffff57,0 0 26px #ffdd8638}.field,.range-field,.toggle-row{min-width:0;color:var(--ink-soft);gap:8px;font-size:.93rem;display:grid}.hidden-file{display:none}.logo-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.mini-glass-button{min-height:42px;color:var(--ink-soft);background:linear-gradient(135deg,#ffffff52,#ffffff14),#ffffff1f;border:1px solid #ffffff75;border-radius:16px;padding:0 12px;box-shadow:inset 0 1px #ffffff6b}.logo-name{min-width:0;color:var(--ink-soft);overflow-wrap:anywhere;font-size:.86rem;line-height:1.45}.logo-name.muted{color:var(--ink-muted)}.field select{width:100%;min-height:44px;color:var(--ink);appearance:none;background-color:#ffffff3d;background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23395042' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 18px center;background-repeat:no-repeat;background-size:18px 18px;border:1px solid #ffffff75;border-radius:16px;outline:0;padding:0 48px 0 14px;box-shadow:inset 0 1px 16px #ffffff21}.range-field{grid-template-columns:82px minmax(0,1fr) 52px;align-items:center}.range-field strong{color:var(--ink);text-align:right;font-size:.88rem;font-weight:520}.range-field input{appearance:none;background:0 0;width:100%;min-width:0;height:22px}.range-field input::-webkit-slider-runnable-track{background:#39504275;border-radius:999px;height:7px;box-shadow:inset 0 1px 2px #00000029}.range-field input::-webkit-slider-thumb{appearance:none;background:#fff0b9;border:1px solid #39504214;border-radius:50%;width:22px;height:22px;margin-top:-7.5px;box-shadow:0 8px 18px #1f3e6724}.range-field input::-moz-range-track{background:#39504275;border-radius:999px;height:7px;box-shadow:inset 0 1px 2px #00000029}.range-field input::-moz-range-thumb{background:#fff0b9;border:1px solid #39504214;border-radius:50%;width:22px;height:22px;box-shadow:0 8px 18px #1f3e6724}.swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.compact-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.swatches button{border-radius:16px;justify-content:flex-start;align-items:center;gap:9px;min-height:42px;padding:0 10px;font-size:.92rem;display:flex}.swatches span{border:1px solid #3950422e;border-radius:50%;flex:none;width:18px;height:18px;background-size:10px 10px!important}.sub-control-title{color:var(--ink-muted);font-size:.86rem;line-height:1.4}.custom-color{grid-template-columns:minmax(0,1fr) 42px;align-items:center}.custom-color input{background:#ffffff2e;border:1px solid #ffffff75;border-radius:50%;width:42px;height:42px;padding:4px;overflow:hidden}.custom-color input::-webkit-color-swatch-wrapper{padding:0}.custom-color input::-webkit-color-swatch{border:0;border-radius:50%}.custom-color input::-moz-color-swatch{border:0;border-radius:50%}.toggle-row{grid-template-columns:18px 18px minmax(0,1fr);align-items:center;line-height:1.45}.toggle-row input{accent-color:#fff0b9}.export-canvas{display:none}@media (width<=1180px){.collage-workspace{grid-template-columns:1fr}.drop-canvas-stage canvas{max-width:none}}@media (width<=600px){html,body,#root{height:100%;overflow:hidden}.butter-stage{height:100dvh;min-height:0;padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));overflow:hidden}.collage-hero,.collage-workspace{width:min(100%,560px)}.collage-hero{display:none}.brand{letter-spacing:.34em;text-indent:.34em}h1{font-size:clamp(4rem,21vw,7rem);line-height:.9}.collage-workspace{flex-direction:column;gap:10px;height:100%;min-height:0;display:flex}.control-panel{min-height:0;padding:2px 2px calc(18px + env(safe-area-inset-bottom));overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch;flex:1 1 0;order:2;grid-auto-rows:max-content;align-content:start;overflow:hidden auto}.panel-block{border-radius:24px;padding:16px}.compact-block .export-button{width:min(100%,220px)}.drop-zone{border-radius:28px;flex:0 0 clamp(230px,38dvh,320px);order:1;min-height:0;padding:18px}.drop-zone.has-preview{grid-template-rows:auto minmax(0,1fr);min-height:0;padding:12px;display:grid;overflow:hidden}.drop-preview-head{align-items:center;gap:10px}.drop-preview-head>span:first-child,.drop-preview-head em,.drop-hint{display:none}.drop-preview-head em{text-align:left;max-width:none}.preview-actions{flex-wrap:nowrap;justify-content:center;gap:6px;width:100%}.preview-actions button{white-space:nowrap;min-height:40px;padding:0 10px}.drop-canvas-stage{border-radius:20px;min-height:0;padding:8px;overflow:hidden}.preview-canvas-wrap{max-width:100%;max-height:100%}.preview-delete{width:30px;height:30px}.segmented{grid-template-columns:repeat(2,minmax(0,1fr))}.range-field{grid-template-columns:1fr 52px}.range-field span{grid-column:1/-1}.desktop-drop-note,.desktop-export-label{display:none}.mobile-export-label{display:inline}}