:root{color:#202329;background:#f7f7f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Noto Sans JP,sans-serif;line-height:1.5}*{box-sizing:border-box}body{margin:0}header{background:#fff;border-bottom:1px solid #e8e8e5;align-items:center;gap:42px;height:72px;padding:0 max(24px,50% - 590px);display:flex}.brand{letter-spacing:-.04em;align-items:center;gap:9px;font-size:21px;font-weight:800;display:flex}.brand small{color:#9b9b98;letter-spacing:0;margin-left:2px;font-size:10px;font-weight:500}.mark{color:#fff;background:#1e5c52;border-radius:8px;place-items:center;width:30px;height:30px;display:grid}nav{flex:1;gap:28px;display:flex}nav a,.mobile-nav a{color:#92938e;cursor:pointer;font-size:13px;text-decoration:none}nav a.active{color:#1f2927;font-weight:700}.github{color:#555;background:#fff;border:1px solid #deded9;border-radius:7px;align-items:center;gap:7px;padding:8px 13px;font-weight:600;display:flex}.menu{background:0 0;border:0;display:none}.mobile-nav{display:none}main{max-width:1180px;margin:auto;padding:64px 24px}.hero{justify-content:space-between;align-items:center;margin-bottom:44px;display:flex}.eyebrow,.step{letter-spacing:.16em;color:#5b9188;font-size:11px;font-weight:800}.hero h1{letter-spacing:-.07em;margin:12px 0 14px;font-size:48px}.lead{color:#777a76;font-size:15px}.hero-art{color:#559c91;background:#dcece7;border-radius:28px;place-items:center;width:190px;height:150px;display:grid;position:relative;transform:rotate(4deg)}.hero-art span{font-size:22px;position:absolute;top:27px;right:34px}.workspace{grid-template-columns:1.05fr .95fr;gap:18px;display:grid}.panel{background:#fff;border:1px solid #e6e6e1;border-radius:14px;padding:25px}.upload-panel{grid-row:span 2}.result{grid-area:1/2/span 2}.panel-heading{justify-content:space-between;align-items:flex-start;margin-bottom:22px;display:flex}.panel h2{letter-spacing:-.04em;margin:5px 0 0;font-size:20px}.count{color:#48897d;background:#edf5f2;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700}.drop{color:#5a988d;cursor:pointer;background:#fbfdfc;border:1.5px dashed #b9d0ca;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:8px;height:188px;display:flex}.drop strong{color:#303b38;font-size:14px}.drop span{color:#999;font-size:12px}.drop u{color:#438d81}.file-list{gap:8px;margin-top:18px;display:grid}.file{background:#fafaf8;border-radius:8px;align-items:center;gap:8px;padding:7px 9px;font-size:12px;display:flex}.file img{object-fit:cover;border-radius:5px;width:32px;height:32px}.file span{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.file small{color:#aaa}.file button{color:#aaa;cursor:pointer;background:0 0;border:0}.tip{color:#aaa;align-items:center;gap:6px;margin-top:18px;font-size:11px;display:flex}label{justify-content:space-between;margin:18px 0 9px;font-size:12px;font-weight:700;display:flex}.segmented{background:#f2f3f1;border-radius:8px;padding:3px;display:flex}.segmented button,.format button{color:#777;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:1;padding:8px;font-size:12px}.segmented button.selected,.format button.selected{color:#347b70;background:#fff;font-weight:700;box-shadow:0 1px 3px #00000012}.range{accent-color:#4d9487;width:100%}.range-label{color:#aaa;justify-content:space-between;font-size:10px;display:flex}.color-row{gap:8px;display:flex}.color-row input[type=color]{border:1px solid #ddd;border-radius:6px;width:36px;height:34px;padding:3px}.color-row input[type=text],.color-row input:not([type]){border:1px solid #ddd;border-radius:6px;width:100%;padding:0 10px;font-size:12px}.canvas-wrap{background:#f0f0ed;border-radius:9px;place-items:center;min-height:280px;padding:18px;display:grid;overflow:auto}.canvas-preview{justify-content:center;align-items:center;max-width:100%;max-height:430px;padding:4px;display:flex}.canvas-preview img{object-fit:contain;max-width:100%;max-height:110px}.empty{color:#aaa;text-align:center;place-items:center;gap:10px;font-size:12px;display:grid}.save-row{align-items:center;gap:12px;margin-top:16px;display:flex}.format{color:#777;align-items:center;gap:3px;font-size:11px;display:flex}.format button{padding:7px 8px}.download{color:#fff;cursor:pointer;background:#205f55;border:0;border-radius:7px;align-items:center;gap:7px;margin-left:auto;padding:11px 15px;font-size:12px;font-weight:700;display:flex}.download:disabled{opacity:.4;cursor:not-allowed}.note{color:#54857c;background:#eff7f4;border-radius:10px;gap:10px;margin-top:20px;padding:14px 18px;font-size:12px;display:flex}footer{color:#3f7169;border-top:1px solid #e5e5e1;padding:28px max(24px,50% - 590px);font-size:15px;font-weight:800}footer span{color:#aaa;margin-left:14px;font-size:11px;font-weight:400}@media (width<=800px){header{gap:12px;padding:0 18px}.brand small,header nav,.github{display:none}.menu{color:#555;margin-left:auto;display:block}.mobile-nav{background:#fff;border-bottom:1px solid #eee;gap:20px;padding:14px 20px;display:flex}.hero{align-items:flex-start}.hero h1{font-size:38px}.hero-art{width:120px;height:100px}.workspace{grid-template-columns:1fr}.upload-panel,.result{grid-area:auto}.panel{padding:19px}.save-row{flex-wrap:wrap}.download{justify-content:center;width:100%;margin-left:0}}.tool-card h2{align-items:center;gap:10px;display:flex}.compact{height:130px}.resize-preview{object-fit:contain;max-width:100%;max-height:260px;margin:20px auto;display:block}.dimensions{gap:12px;display:flex}.dimensions label{flex:1;display:block}.dimensions input{border:1px solid #ddd;border-radius:6px;width:100%;padding:10px}.full{justify-content:center;width:100%;margin-top:18px}.video{border-radius:8px;width:100%;max-height:380px;margin-top:18px}.small-note{color:#888;font-size:12px}.privacy-hero{color:#245e55;background:#eaf7f3;border:2px solid #5a9f92;border-radius:14px;align-items:center;gap:18px;max-width:760px;margin:0 auto 24px;padding:22px 26px;display:flex}.privacy-hero strong{font-size:18px}.privacy-hero p{color:#477970;margin:5px 0 0;font-size:13px}.merge-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;display:grid}.merge-grid img{object-fit:cover;border-radius:6px;width:100%;height:90px}@media (width<=600px){.privacy-hero{gap:12px;padding:18px}.privacy-hero strong{font-size:15px}.privacy-hero p{font-size:12px}body{font-size:14px;overflow-x:hidden}header{z-index:5;height:62px;padding:0 14px;position:sticky;top:0}.brand{font-size:19px}.brand small{display:none}header nav{white-space:nowrap;scrollbar-width:none;flex:1;gap:4px;display:flex;overflow-x:auto}nav a{flex:none;padding:10px 8px;font-size:11px}main{padding:28px 12px}.hero{margin-bottom:24px;display:block}.hero h1{margin:8px 0;font-size:30px;line-height:1.2}.lead{font-size:13px}.hero-art{display:none}.privacy-hero{align-items:flex-start;margin-bottom:16px;padding:16px}.privacy-hero svg{width:24px;min-width:24px}.tool-card{border-radius:12px;padding:18px 14px}.tool-card h2{margin-top:0;font-size:18px}.drop.compact{height:116px;min-height:116px}.drop{text-align:center;padding:12px}.dimensions{align-items:end;gap:8px}.dimensions label{font-size:11px}.dimensions input{min-height:44px;padding:8px;font-size:16px}.download{min-height:46px;font-size:14px}.range{width:100%;height:30px}.video{max-height:240px}.merge-grid{grid-template-columns:repeat(2,1fr)}.merge-grid img{height:82px}.info-card{min-height:0;padding:22px 18px}.info-card h2{font-size:23px}.info-card>p:not(.eyebrow):not(.small-note){font-size:14px;line-height:1.9}footer{padding:22px 14px;line-height:2}footer span{margin:0 12px 0 0;font-size:11px;display:inline-block}}header nav{align-items:center;gap:12px;display:flex}header nav button{color:#b6bec1;cursor:pointer;font:inherit;background:0 0;border:0;padding:10px 12px}header nav button:hover,header nav button.active{color:#8de6d2}.tool-card{background:#151a1b;border:1px solid #354144;border-radius:16px;max-width:760px;margin:24px auto;padding:28px}.tool-card h2{margin-top:0}.hint{color:#aab4b6}.settings{flex-wrap:wrap;align-items:center;gap:24px;margin:18px 0;display:flex}.drop{cursor:pointer}.range{accent-color:#86dec7}.preset-row{flex-wrap:wrap;gap:8px;margin:18px 0;display:flex}.preset-row button,.segmented button,.action-grid button,.dimensions input,.editor-controls select,.tool-card select{color:#eef4f2;background:#202728;border:1px solid #4a5558;border-radius:8px;padding:9px}.preset-row small{color:#91a1a2;font-size:11px;display:block}.dimensions{gap:12px;margin:18px 0;display:flex}.dimensions label,.editor-controls label{color:#c7d0d0;gap:6px;display:grid}.dimensions input{width:130px}.merge-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin:20px 0;display:grid}.merge-grid img{object-fit:contain;background:#0d1112;border-radius:8px;width:100%;height:110px}.download{justify-content:center;align-items:center;gap:8px;display:inline-flex}.full{width:100%;margin-top:16px}.editor-preview{object-fit:contain;border-radius:10px;max-width:100%;max-height:360px;margin:22px auto;display:block}.editor-controls{gap:16px;display:grid}.action-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.action-grid button{cursor:pointer;flex-direction:column;align-items:center;gap:5px;display:flex}.action-grid svg{width:18px}.action-grid .selected,.segmented .selected{color:#8de6d2;background:#123d35;border-color:#8de6d2}@media (width<=700px){.tool-card{margin:18px 0;padding:20px}.action-grid{grid-template-columns:repeat(2,1fr)}.dimensions{flex-direction:column}.dimensions input{box-sizing:border-box;width:100%}header nav{gap:0;overflow:auto}header nav button{white-space:nowrap;padding:8px 7px;font-size:13px}}button:disabled{opacity:.45;cursor:not-allowed!important}.editor-preview-frame{justify-content:center;align-items:center;max-height:360px;margin:22px auto;display:flex;overflow:hidden}.editor-preview-frame.cropped{aspect-ratio:1;border:2px solid #72b8a8;border-radius:10px;width:min(100%,360px)}.editor-preview-frame.cropped .editor-preview{object-fit:cover;width:100%;height:100%;margin:0}.editor-status{color:#63827a;margin:14px 0 0;font-size:12px}.compression-note{color:#477970;background:#eff7f4;border-left:4px solid #5a9f92;margin:14px 0;padding:12px 14px;font-size:13px}footer{flex-wrap:wrap;gap:22px;display:flex}footer a{color:#3f7169;font-size:13px;text-decoration:none}footer a:hover{text-decoration:underline}footer button{color:#3f7169;cursor:pointer;background:0 0;border:0;padding:0;font-size:13px}footer button:hover{text-decoration:underline}.info-card{background:#fff;border:1px solid #e6e6e1;border-radius:14px;max-width:760px;margin:24px auto;padding:28px}.info-card h2{margin-top:0}.info-card p{color:#59625f;line-height:1.9}.tool-card{color:#202329;background:#fff;border-color:#e6e6e1}.tool-card .hint{color:#777a76}.preset-row button,.segmented button,.action-grid button,.dimensions input,.editor-controls select,.tool-card select{color:#202329;background:#fff;border-color:#d8ddd9}.dimensions label,.editor-controls label{color:#4d5552}.merge-grid img{background:#f0f0ed}
