:root{color-scheme:light;--ink:#443541;--muted:#897783;--pink:#e987b0;--pink-dark:#bf5687;--pink-pale:#fff0f6;--line:#f0dce6;--shadow:0 12px 36px #a34f7410}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#fff8fb 0,#fff 380px);color:var(--ink);font-family:ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Sans",Meiryo,system-ui,sans-serif;line-height:1.65}button,input,select{font:inherit}button{cursor:pointer}.shell{width:min(1160px,calc(100% - 32px));margin:auto}.topbar{padding:22px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:1.16rem;text-decoration:none;color:inherit}.brand-mark{width:43px;height:43px;flex:none;filter:drop-shadow(0 4px 7px #d56b9a25)}.help-button,.icon-button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:11px;padding:8px 12px;background:#fff;color:#985174;font-weight:750}.help-button svg,.icon-button svg,.panel-head svg,.primary svg,.feature-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.hero{text-align:center;padding:37px 0 31px}.eyebrow{color:var(--pink-dark);font-weight:800;font-size:.8rem;letter-spacing:.13em}.hero h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.25;letter-spacing:-.045em;margin:12px 0}.hero h1 span{color:var(--pink-dark)}.hero p{max-width:600px;margin:0 auto;color:var(--muted);font-size:.96rem}.workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(285px,.82fr);gap:20px;align-items:start;padding-bottom:34px}.panel{background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);overflow:hidden;min-width:0}.panel-head{padding:17px 20px;border-bottom:1px solid #f5e8ee;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head h2{margin:0;font-size:1rem;display:flex;align-items:center;gap:9px}.panel-head h2 svg{color:#bf5687;flex:none}.panel-head h2{letter-spacing:-.015em}.subtle{color:var(--muted);font-size:.8rem}.preview-area{padding:18px}.dropzone{border:1.5px dashed #e9b7ce;border-radius:18px;background:#fff8fb;min-height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;transition:background .2s,border-color .2s;cursor:pointer}.dropzone.drag{background:#ffeaf3;border-color:var(--pink-dark)}.upload-icon{width:53px;height:53px;border-radius:18px;display:grid;place-items:center;background:#ffe5f0;color:#b94e80;margin-bottom:12px}.upload-icon svg{width:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dropzone strong{font-size:1rem}.dropzone p{margin:5px 0 14px;color:var(--muted);font-size:.83rem}.primary,.secondary{border:0;border-radius:12px;padding:10px 16px;font-weight:800;transition:filter .15s}.primary{background:linear-gradient(135deg,#e987b0,#d86c9d);color:#fff;box-shadow:0 5px 14px #df76a52c}.secondary{background:#fff0f6;color:#a34875;border:1px solid #f1d6e3}.primary:hover,.secondary:hover,.help-button:hover{filter:brightness(.97)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preview-grid[hidden],.file-info[hidden],.preview-actions[hidden],.dropzone[hidden],.busy[hidden]{display:none}.preview-card{min-width:0;border:1px solid #f0e1e8;border-radius:15px;overflow:hidden;background:#fcfafb}.preview-title{padding:9px 12px;display:flex;justify-content:space-between;gap:8px;font-size:.82rem;font-weight:800;background:#fff}.preview-title span:last-child{font-size:.72rem;color:var(--muted);font-weight:500}.image-wrap{height:clamp(230px,30vw,390px);position:relative;display:grid;place-items:center;background-color:#f7f2f5;background-image:linear-gradient(45deg,#eae3e8 25%,transparent 25%),linear-gradient(-45deg,#eae3e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eae3e8 75%),linear-gradient(-45deg,transparent 75%,#eae3e8 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;overflow:hidden}.image-wrap canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.busy{position:absolute;inset:0;background:#fff9fccc;display:flex;align-items:center;justify-content:center;gap:9px;color:#985174;font-size:.84rem;font-weight:800}.busy span{width:16px;height:16px;border:2px solid #edc3d7;border-top-color:#bf5687;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.file-info{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:12px;color:var(--muted);font-size:.78rem}.preview-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.preview-actions button{flex:1}.empty-note{text-align:center;color:var(--muted);font-size:.82rem;padding:10px 0 0}.controls{padding:19px}.control-intro{font-size:.84rem;color:var(--muted);margin:0 0 15px}.control{padding:14px 0;border-bottom:1px solid #f4e7ed}.control:first-of-type{padding-top:0}.control:last-of-type{border-bottom:0}.control-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px}.control label{font-weight:800;font-size:.9rem}.value{font-size:.82rem;color:var(--pink-dark);font-weight:850;background:#fff0f6;padding:3px 8px;border-radius:8px;min-width:47px;text-align:center}.range{width:100%;accent-color:var(--pink-dark);cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:.7rem;color:#a08b98}.control small{display:block;color:var(--muted);font-size:.76rem;margin-top:5px}.save-title{margin:17px 0 8px;font-size:.76rem;letter-spacing:.07em;color:#a1778d;font-weight:850}.format-label{display:block;margin-bottom:5px}.select{width:100%;padding:10px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink)}.download{width:100%;margin-top:15px;padding:12px;display:flex;justify-content:center;align-items:center;gap:8px}.download svg{width:19px}.download:disabled,.reset:disabled{opacity:.45;cursor:not-allowed}.reset{width:100%;margin-top:8px}.notice{font-size:.75rem;color:var(--muted);margin:12px 0 0}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 0 35px}.feature{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px}.feature b{display:block;font-size:.88rem;margin:6px 0 4px}.feature p{margin:0;color:var(--muted);font-size:.78rem}.feature-icon{color:#bf5687}.feature-icon svg{width:23px;height:23px;stroke-width:1.8}footer{text-align:center;color:#a38d9a;font-size:.76rem;padding:20px 0 30px;border-top:1px solid #f5e8ee}.help-dialog{width:min(510px,calc(100% - 28px));border:1px solid var(--line);border-radius:20px;padding:23px;color:var(--ink);box-shadow:0 24px 80px #51324430}.help-dialog::backdrop{background:#33232f66;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-head h2{font-size:1.15rem;margin:0}.icon-button{padding:6px}.icon-button svg{width:19px}.help-dialog ol{padding-left:1.4rem}.help-dialog li{padding:3px 0}.help-dialog h3{font-size:.93rem;margin:17px 0 5px}.help-dialog p{font-size:.87rem;color:#786574;margin:0}.dialog-done{width:100%;margin-top:20px}@media(max-width:800px){.workspace{grid-template-columns:1fr}.hero{padding:28px 0 23px}.image-wrap{height:clamp(240px,55vw,380px)}.feature-row{grid-template-columns:1fr}.controls{padding:18px}}@media(max-width:480px){.shell{width:calc(100% - 22px)}.preview-grid{grid-template-columns:1fr}.image-wrap{height:310px}.hero h1{font-size:2.05rem}.hero p{font-size:.9rem}.panel-head{padding:15px}.preview-area{padding:12px}.subtle{font-size:.72rem}}.mode-strip{display:flex;gap:10px;margin:0 0 18px}.mode-button{flex:1;text-align:left;padding:13px 16px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--ink);font-weight:800}.mode-button small{display:block;color:var(--muted);font-weight:500}.mode-button.active{border-color:#dc8db1;background:#fff2f8}.sample-panel{margin-bottom:20px;padding:18px}.sample-panel h2{font-size:1rem;margin:0}.sample-panel p,.sample-foot{font-size:.8rem;color:var(--muted);margin:5px 0}.sample-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.sample-chip{border:1px solid #efd3e1;border-radius:999px;background:#fff;color:#a34875;padding:8px 13px;font-weight:750}.sample-chip.active{background:#ffe7f1}.compare-slider-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 12px;font-size:.8rem;color:var(--muted)}.compare-slider-wrap[hidden]{display:none}.compare-slider-wrap input{flex:1;min-width:100px;accent-color:var(--pink-dark)}.sample-foot{font-size:.72rem}@media(max-width:520px){.mode-strip{flex-direction:column}}
.sample-panel{margin-top:0}.sample-panel .sample-chip:hover{border-color:var(--pink-dark);transform:translateY(-1px)}.mode-button:focus-visible,.sample-chip:focus-visible{outline:3px solid #e987b080;outline-offset:2px}.compare-slider-wrap{margin-top:2px}.preview-grid canvas{display:block;max-width:100%;height:auto;margin:auto}.preview-grid .image-wrap{overflow:hidden}
/* Comparison wipe uses an opaque clipped original layer, not transparency. */
.preview-card .image-wrap{isolation:isolate}.preview-card canvas{opacity:1!important}.compare-slider-wrap output{min-width:95px;text-align:right;font-weight:750;color:var(--pink-dark)}

.ai-panel{margin:0 0 22px;padding:22px 24px}.ai-panel[hidden]{display:none}.ai-panel-head h2{margin:0 0 8px;font-size:1.08rem}.ai-panel-head h2 span{font-size:.78rem;color:var(--pink-dark);font-weight:600;margin-left:8px}.ai-panel-head p,.ai-note,.ai-status{font-size:.88rem;color:var(--muted);line-height:1.7}.ai-load-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}.ai-file-label{display:inline-flex;align-items:center;justify-content:center;min-height:42px;cursor:pointer}.ai-load-row input[type=file]{max-width:100%;font-size:.82rem}.ai-status{padding:10px 12px;border-radius:10px;background:#fff4f9;color:#a13e70}.ai-note{margin-bottom:0;font-size:.78rem}

/* Accessible styled file/model controls */
.ai-load-row{align-items:center}.ai-load-row>label:not(.ai-file-label){font-size:.88rem;font-weight:700}.ai-load-row .select{min-width:min(300px,100%);width:auto;background:#fff;border:1px solid #e9c9d9;border-radius:12px;padding:10px 38px 10px 13px;color:var(--ink)}.ai-file-label{border:1px solid #e8bfd2;border-radius:12px;padding:9px 15px;background:#fff;color:var(--pink-dark);font-weight:700;transition:background .15s,border-color .15s}.ai-file-label:hover{background:#fff0f6;border-color:var(--pink-dark)}.dropzone .primary{pointer-events:none}.dropzone input[type=file]{display:none}
.mode-strip{position:relative;z-index:1}.ai-panel{position:relative;z-index:1}.workspace{position:relative;z-index:0}

/* Larger touch target for range controls, especially sharpness on mobile */
input[type="range"]{touch-action:pan-y;cursor:pointer;min-height:28px}input[type="range"]::-webkit-slider-thumb{width:22px;height:22px;cursor:grab}input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing}input[type="range"]::-moz-range-thumb{width:22px;height:22px;cursor:grab}

input[type="range"]{width:100%;min-height:34px;touch-action:pan-y;cursor:pointer;accent-color:#bf5687}input[type="range"]::-webkit-slider-thumb{width:26px;height:26px;cursor:grab}input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing}input[type="range"]::-moz-range-thumb{width:26px;height:26px;cursor:grab}@media(max-width:600px){.ai-load-row{align-items:stretch;flex-direction:column}.ai-load-row .select{width:100%}.ai-load-row .primary,.ai-file-label{width:100%;text-align:center}}

/* Keep loading feedback lightweight and avoid overlay repaint storms */
#busy{pointer-events:none;contain:content}

/* Seasonal affiliate feature */
.affiliate-section{margin:8px auto 34px;padding:clamp(20px,4vw,34px);border:1px solid #f0d3e1;border-radius:24px;background:linear-gradient(135deg,#fff7fb 0%,#fff 55%,#fff0f6 100%);box-shadow:0 12px 36px #a34f7410}
.affiliate-intro{max-width:760px;margin:0 auto 18px;text-align:center}
.affiliate-kicker{display:inline-block;padding:5px 12px;border-radius:999px;background:#ffe2ef;color:#a33e70;font-size:.76rem;font-weight:850;letter-spacing:.04em}
.affiliate-intro h2{margin:12px 0 8px;color:#513647;font-size:clamp(1.25rem,3vw,1.8rem);line-height:1.4}
.affiliate-intro p{margin:7px 0;color:#806879;font-size:.9rem}
.affiliate-intro .affiliate-product-title{margin-top:17px;color:#a33e70;font-size:1.08rem;font-weight:850}
.affiliate-intro .affiliate-caption{font-size:.8rem}
.affiliate-section #msmaflink-71mhr{width:fit-content;max-width:100%;margin:16px auto;padding:12px 22px;border-radius:999px;background:#c65386;color:#fff;text-align:center;font-weight:850}
.affiliate-section #msmaflink-71mhr a{color:#fff}
.affiliate-disclosure{margin:16px 0 0;text-align:center;color:#a38d9a;font-size:.7rem}
