:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif;color:#293a31;background:#f5f4ef;font-synthesis:none;--green:#244c3c;--muted:#7d857c;--line:#e1e3da}*{box-sizing:border-box}body{margin:0}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a.download{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button{border:1px solid var(--line);border-radius:9px;background:#fff;color:inherit;padding:10px 12px;transition:background .16s}button:hover:enabled{background:#e9eee6}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b4cabc;outline-offset:3px}header{max-width:1440px;margin:auto;height:100px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--green);font-size:29px;font-weight:650;letter-spacing:-1px;display:flex;align-items:center;gap:10px}.brandmark{font-size:47px;font-weight:300}.beta{font-size:9px;letter-spacing:1.4px;margin-left:13px;border-left:1px solid #cbd1c6;padding-left:20px;color:#7f897e}.privacy{display:flex;align-items:center;gap:8px;font-size:12px;color:#69786b}.privacy i{width:7px;height:7px;background:#678268;border-radius:50%}main{max-width:1280px;margin:auto;padding:50px 35px 0}.intro{margin-bottom:36px}.eyebrow{font-size:10px;letter-spacing:2.7px;color:#7b8b76;margin-bottom:16px}h1{font-size:clamp(30px,3.3vw,46px);font-weight:550;letter-spacing:-1.6px;margin:0 0 16px}h1 span{color:#83937d}.intro p{color:#7b8277;font-size:14px;line-height:1.8}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid #dce0d5;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 10px 45px #23332a05}.studio{display:flex;flex-direction:column;min-width:0;background:#fdfdfb}.studiohead{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;font-size:12px;border-bottom:1px solid var(--line);gap:12px}.studiohead>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.textbtn{border:none;background:none;font-size:12px;flex-shrink:0;padding:5px}.drop{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:560px;padding:28px;overflow:auto;background:radial-gradient(#cdd3c46b .65px,transparent .65px);background-size:14px 14px}.drop.dragover{background-color:#e9efe5}#empty{text-align:center}#empty h2{font-weight:500;font-size:22px;margin:24px 0 12px}#empty p{color:#8a9087;font-size:13px;margin-bottom:26px}#empty small{display:block;color:#92978e;font-size:11px;margin-top:18px}.primary{background:var(--green);color:#fff;border:0;padding:15px 22px;border-radius:9px;font-size:13px;display:inline-flex;align-items:center;justify-content:space-between;gap:42px}.primary:hover:enabled{background:#35624d}.abstract{width:182px;height:135px;position:relative;margin:0 auto;isolation:isolate}.abstract span{position:absolute;border-radius:50%;width:105px;height:105px;top:15px;background:#c6cdb9;filter:blur(15px);opacity:.7}.abstract span:nth-child(1){left:15px;top:0;background:#d9d6ba}.abstract span:nth-child(2){left:70px;top:34px;background:#a6b7a0}.abstract span:nth-child(3){left:20px;top:34px;background:#c3c4b1}.abstract b{position:absolute;inset:0;display:grid;place-items:center;font-size:72px;font-weight:200;color:#fff8}.studiobottom{padding:17px 22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:11px;color:#7a8477;gap:8px}.studiobottom button{font-size:11px;background:none;padding:7px 10px}.paneltitle{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:23px 22px;border-bottom:1px solid var(--line)}.step{font-size:10px;color:#97a18e;letter-spacing:1px}aside{border-left:1px solid var(--line);background:#fbfcf9}.control{padding:20px 22px;border-bottom:1px solid var(--line)}.control.last{border-bottom:0}h3{font-size:11px;color:#939d8c;display:flex;align-items:center;gap:12px;font-weight:400;margin:0 0 18px}h3 span{color:#364737;font-size:13px;font-weight:550}.labelrow{display:flex;align-items:baseline;justify-content:space-between}.pill{font-size:10px;color:#839077}.wide{width:100%;font-size:12px;background:#edf1e8;border-color:#dfe5d8}.segmented{display:flex;gap:5px;margin-top:9px}.segmented button{flex:1;font-size:11px;padding:10px 3px;background:transparent}.segmented button.active{border-color:#9aaf93;background:#f0f4eb;color:#34583d}.hint{color:#8a9285;font-size:11px;line-height:1.8;margin:12px 0 0}.tinyrow{display:flex;justify-content:space-between;margin-top:9px}.tinyrow button{font-size:10px;border:0;background:none;padding:7px 0;color:#71816b}label{font-size:11px;display:block;color:#798370;margin:15px 0 0}output{float:right;color:#52684c;font-size:11px}input[type=range]{display:block;width:100%;height:4px;margin:17px 0 22px;accent-color:#526d45;cursor:pointer}.formrow{display:flex;gap:9px}.formrow label{min-width:0;flex:1;margin:0}select{display:block;width:100%;font-size:11px;background:#fff;border:1px solid var(--line);color:#52614c;padding:11px 5px;border-radius:7px;margin-top:8px}.export{width:100%;margin-top:17px}#status{color:#6b7c63;font-size:12px;line-height:1.8;min-height:50px;padding:16px 4px}#status.error{color:#a14835}.footnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin:28px 0 40px}.footnotes>div{position:relative;padding-left:33px}.footnotes span{position:absolute;left:0;top:0;font-size:21px;color:#8b9b7f}.footnotes h4{font-size:13px;font-weight:500;margin:2px 0 9px}.footnotes p{font-size:11px;line-height:1.8;color:#89907f;margin:0}details{font-size:11px;color:#85917e;line-height:1.9;padding-bottom:30px}summary{cursor:pointer}details a{color:#536e4a}footer{max-width:1280px;margin:0 auto;padding:25px 35px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:11px;color:#939b8b}footer span:first-child{font-weight:600;font-size:17px;color:#7b8c73}#imageArea{position:relative;max-width:100%;line-height:0;margin:auto;flex-shrink:0}#view{display:block;max-width:100%;height:auto;max-height:76vh;object-fit:contain}#overlay{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}#busy{position:absolute;inset:0;background:#f7f8f1dd;align-items:center;justify-content:center;flex-direction:column;gap:15px;z-index:5;font-size:13px}#busy:not([hidden]){display:flex}.spinner{width:25px;height:25px;border:2px solid #b8c3ae;border-top-color:#34593e;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#downloadBox{margin-top:14px;padding:12px;border:1px solid #dbe5d1;border-radius:8px;background:#eef4e8;font-size:11px;line-height:1.8}.download{display:block;color:#244c3c;text-align:center;margin-top:9px;font-weight:600;padding:7px;border:1px solid #bfcfb4;border-radius:5px;text-decoration:none}[hidden]{display:none!important}@media(max-width:900px){main{padding:34px 20px 0}.workspace{grid-template-columns:minmax(0,1fr) 300px}.control{padding:18px}.paneltitle{padding:22px 18px}.drop{padding:14px;min-height:480px}.beta{display:none}}@media(max-width:680px){header{height:76px;padding:0 20px}.brand{font-size:24px}.brandmark{font-size:36px}.privacy{font-size:10px}main{padding:32px 15px 0}.intro{margin-bottom:26px}.intro p{font-size:12px}.eyebrow{font-size:8px}h1{font-size:31px}.workspace{grid-template-columns:1fr}.drop{min-height:360px;padding:12px}aside{border-left:0;border-top:1px solid var(--line)}.paneltitle{padding:18px}.control{padding:18px 20px}.footnotes{gap:24px;grid-template-columns:1fr;margin:20px 5px 30px}.studiohead{padding:14px}.studiobottom{padding:12px;font-size:10px}#view{max-height:65vh}footer{padding:20px}.formrow select{font-size:12px}}

@media(max-width:680px){button{min-height:44px}.tinyrow button{padding:12px 4px;font-size:12px}.segmented button{font-size:12px}.studiobottom button{min-height:40px}input[type=range]{height:28px;margin:8px 0 10px}select{min-height:44px}.hint{font-size:12px}.studiohead .textbtn{font-size:12px}.privacy{max-width:145px;line-height:1.5}#share{margin-top:10px;min-height:44px}}

/* Keep the live photograph visible while mobile editing controls scroll below it.
   overflow must remain visible so the studio sticks to the viewport, not a clip box. */
@media(max-width:680px){
 .workspace.has-photo{display:block;overflow:visible}
 .has-photo .studio{position:sticky;top:0;z-index:20;isolation:isolate;border-radius:15px 15px 0 0;box-shadow:0 8px 18px #23332a16;overflow:hidden;background:#fdfdfb}
 .has-photo .studiohead{min-height:44px;padding:4px 12px;background:#fdfdfb}
 .has-photo .drop{flex:none;min-height:0;height:auto;padding:8px 12px;overflow:hidden}
 .has-photo #imageArea{width:min(100%,calc((46vh - 112px)*var(--photo-aspect,1)));max-width:100%;margin:0 auto}
 .has-photo #view{width:100%;height:auto;max-height:none}
 .has-photo .studiobottom{min-height:44px;padding:3px 12px;background:#fdfdfb}
 .has-photo .studiobottom button{min-height:36px}
 .has-photo aside{border-radius:0 0 15px 15px}
 .has-photo .paneltitle{display:none}
 .has-photo .control{padding:16px 18px}
 .has-photo .labelrow h3{margin-bottom:12px}
 .has-photo .control h3{margin-top:0}
 .has-photo .control .hint{font-size:11px}
 .has-photo aside label{scroll-margin-top:48vh}
}
@supports(height:1svh){@media(max-width:680px){
 .has-photo #imageArea{width:min(100%,calc((46svh - 112px)*var(--photo-aspect,1)))}
 .has-photo aside label{scroll-margin-top:48svh}
}}
@media(max-width:680px){.has-photo aside input,.has-photo aside select,.has-photo aside button{scroll-margin-top:48vh}}
@supports(height:1svh){@media(max-width:680px){.has-photo aside input,.has-photo aside select,.has-photo aside button{scroll-margin-top:48svh}}}

.intro{margin-bottom:26px}.intro h1{font-size:34px;letter-spacing:0}.intro h1 span{margin-left:5px}#status:empty{display:none}.technical{margin-top:22px}.technical ul{padding-left:20px;margin:12px 0 0}.technical li{margin:8px 0;line-height:1.9}#empty p{margin-top:26px}

/* In-page quality menu stays aligned with its trigger across browsers. */
.formatfield,.qualitypicker{flex:1;min-width:0}.fieldlabel{display:block;font-size:11px;color:#798370}.fixedformat,.qualitytoggle{width:100%;min-height:42px;margin-top:8px;padding:11px 12px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#52614c;font:inherit;font-size:12px;line-height:18px;text-align:left}.fixedformat{display:flex;align-items:center}.qualitypicker{position:relative}.qualitytoggle{display:flex;align-items:center;justify-content:space-between;gap:12px}.selectchevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 2px 4px 0;flex-shrink:0}.qualityoptions{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:5px;padding:4px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 6px 18px #23332a20}.qualityoptions button{display:block;width:100%;padding:10px 8px;border:0;border-radius:4px;background:#fff;font-size:12px;text-align:left;white-space:nowrap}.qualityoptions button[aria-selected=true]{background:#edf1e8;color:var(--green)}.qualityoptions button:focus-visible{outline:2px solid #9aaf93;outline-offset:-2px}.control.last{position:relative;z-index:1}
@media(max-width:680px){.fixedformat,.qualitytoggle{min-height:44px;font-size:14px}.qualityoptions button{min-height:44px;font-size:14px}}



.qualityoptions{top:auto;bottom:calc(100% - 15px);margin-top:0;margin-bottom:5px}

.brandmark{display:block;width:44px;height:44px;border:1.5px dashed currentColor;border-radius:50%;flex-shrink:0}.brand{line-height:1;gap:12px}.technical{padding-left:22px;padding-right:22px}@media(max-width:680px){.brandmark{width:34px;height:34px}.technical{padding-left:18px;padding-right:18px}}

@media(min-width:681px){.studiohead,.paneltitle{height:64px;min-height:64px;flex-shrink:0}}

.paneltitle{gap:10px}.paneltitle>span{flex-shrink:0}#status{min-width:0;min-height:0;max-height:3em;padding:0;font-size:10px;line-height:1.5;text-align:right;overflow-wrap:anywhere;overflow:auto}.has-photo .paneltitle.has-status{display:flex}

.export{justify-content:center;gap:0}#share.download{width:100%;background:transparent;font:inherit;font-weight:600;font-size:11px;line-height:1.8;min-height:0;margin-top:9px;padding:7px;border:1px solid #bfcfb4;border-radius:5px;color:#244c3c;text-align:center}.studiobottom{flex-wrap:wrap}.photohint{flex-basis:100%;margin:0;text-align:center;font-size:11px;line-height:1.6;color:#798370}.qualitytoggle{margin-top:0}.qualityoptions{bottom:calc(100% + 5px);margin-bottom:0}
@media(max-width:680px){#share.download,#download.download{min-height:44px;display:flex;align-items:center;justify-content:center}.photohint{font-size:10px;line-height:1.4}.has-photo .studiobottom{row-gap:3px}}



/* Export result: one information line and equal actions, without nested boxes. */
#downloadBox{margin-top:20px;padding:0;border:0;border-radius:0;background:transparent}#exportInfo{color:#798370;font-size:11px;line-height:1.7;overflow-wrap:anywhere}.resultactions{display:flex;gap:10px;margin-top:12px}.resultaction{display:flex;flex:1;min-width:0;min-height:44px;align-items:center;justify-content:center;margin:0;padding:11px 8px;border:1px solid #bfcfb4;border-radius:7px;background:transparent;color:#244c3c;font:inherit;font-size:12px;font-weight:500;line-height:1.5;text-align:center;text-decoration:none}.resultaction:hover{background:#edf1e8}.control.last h3{margin-bottom:16px}.control.last .export{margin-top:16px}.primary{justify-content:center;gap:0}@media(max-width:380px){.resultactions{flex-direction:column}}

.photohint:empty{display:none}

.tinyrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tinyrow button{width:100%;min-height:44px;padding:10px 8px;border-radius:7px;text-align:center;white-space:nowrap}

footer{width:calc(100% - 70px);max-width:1210px;padding:22px 0;justify-content:flex-end}@media(max-width:900px){footer{width:calc(100% - 40px)}}@media(max-width:680px){footer{width:calc(100% - 30px);padding:20px 0}}

.inlinehelp{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:#536e4a;font:inherit;text-decoration:underline;text-underline-offset:3px}dialog{width:min(480px,calc(100% - 32px));max-height:85svh;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fbfcf9;color:#293a31;overflow:auto;box-shadow:0 18px 60px #0002}dialog::backdrop{background:#1c2f2466}.guideheader{display:flex;justify-content:space-between;align-items:center;gap:16px}.guideheader h2{font-size:18px;margin:0}.guideheader button{min-height:40px}dialog section{margin-top:24px}dialog h3{display:block;margin:0 0 12px;font-size:14px;font-weight:600;color:#244c3c}dialog ol{padding-left:22px;font-size:13px;line-height:1.8}dialog li{margin:8px 0}dialog p,dialog a{font-size:11px;line-height:1.7;color:#71816b}

header{max-width:1280px;padding-inline:35px}@media(max-width:900px){header{padding-inline:20px}}@media(max-width:680px){header{padding-inline:15px}}

#empty{display:flex;flex-direction:column;align-items:center;gap:20px;padding:28px 16px}#empty .abstract{margin:0 0 4px;height:120px;opacity:.75}#empty p{margin:0;font-size:13px;line-height:1.5;letter-spacing:.02em;color:#798370}#empty .primary{min-width:144px;min-height:46px;padding:12px 24px;font-size:14px}@media(max-width:680px){#empty{gap:18px}#empty .abstract{height:108px}}

#empty .abstract{display:grid;place-items:center;height:140px;opacity:1}#empty .abstract p{position:relative;z-index:1;margin:0;padding:0 8px;color:#52614c;font-size:13px;font-weight:500;white-space:nowrap}#empty .abstract span{top:calc(50% - 66px)}#empty .abstract span:nth-child(2),#empty .abstract span:nth-child(3){top:calc(50% - 46px)}@media(max-width:680px){#empty .abstract{height:128px}}