:root{--bg:#16171a;--bg-elev:#1f2125;--bg-elev2:#282b30;--border:#34383e;--text:#ececed;--text-dim:#a4a8ae;--text-faint:#6d7278;--accent:#6f9fd8;--accent-strong:#8ab4e8;--accent-contrast:#0d1117;--danger:#d98a8a;--warn:#d8c07a;--radius:10px;--rail:280px;--focus:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-strong);--tap:44px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;margin:0;padding:0;font-size:15px;line-height:1.5}#app{flex-direction:column;min-height:100dvh;display:flex}[hidden]{display:none!important}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}:focus-visible{box-shadow:var(--focus);border-radius:6px;outline:none}.btn{font:inherit;color:var(--text);background:var(--bg-elev2);border:1px solid var(--border);border-radius:var(--radius);min-height:var(--tap);cursor:pointer;padding:10px 16px;transition:background .12s,border-color .12s,opacity .12s}.btn:hover{background:#30343a}.btn:disabled,.btn.is-disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--accent);color:var(--accent-contrast);border-color:#0000;font-weight:600}.btn--primary:hover{background:var(--accent-strong)}.btn--ghost{background:0 0}.btn--ghost:hover{background:var(--bg-elev2)}.btn--icon{min-width:var(--tap);border-radius:50%;padding:8px;font-weight:700}.btn.is-busy{opacity:.7;cursor:progress}.app-header{border-bottom:1px solid var(--border);background:var(--bg-elev);z-index:20;align-items:center;gap:16px;padding:10px 16px;display:flex;position:sticky;top:0}.app-header__brand{min-width:0}.app-header__title{letter-spacing:.02em;margin:0;font-size:18px}.app-header__tagline{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;overflow:hidden}.app-header__actions{gap:8px;margin-left:auto;display:flex}.app-main{flex:1;grid-template-columns:1fr;grid-template-areas:"inputs""preview""controls""exportbar";gap:12px;padding:12px;display:grid}.block-inputs{grid-area:inputs}.block-controls{grid-area:controls}.block-preview{grid-area:preview}.block-exportbar{grid-area:exportbar}.panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:14px}@media (width<=767px){.block-preview{z-index:8;max-height:40dvh;position:sticky;top:56px}.block-preview .preview__stage{max-height:calc(40dvh - 44px)}.block-exportbar{z-index:9;position:sticky;bottom:0}}@media (width>=768px){.app-main{--rail:240px;grid-template-columns:var(--rail) minmax(0, 1fr);grid-template-areas:"inputs preview""controls preview""controls exportbar";align-items:start}.block-preview{align-self:start;position:sticky;top:68px}}@media (width>=1120px){.app-main{--rail:280px;gap:18px;padding:18px}}.dropzone-row{gap:10px;display:flex}.dropzone{border:1.5px dashed var(--border);border-radius:var(--radius);background:var(--bg-elev2);text-align:center;cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;min-width:0;min-height:120px;padding:12px;transition:border-color .12s,background .12s;display:flex}.dropzone:hover,.dropzone.is-dragover{border-color:var(--accent);background:#2a2e34}.dropzone.is-guiding{border-color:var(--accent);animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #6f9fd859}50%{box-shadow:0 0 0 6px #6f9fd800}}.dropzone__title{color:var(--text-dim);font-size:13px;font-weight:600}.dropzone__hint{color:var(--text-faint);font-size:12px}.dropzone__formats{color:var(--text-faint);font-size:11px}.dropzone__thumb{max-width:100%}.dropzone__thumb canvas{border-radius:6px;max-width:100%;max-height:96px;display:block}.dropzone.has-image{border-style:solid}.sample-btn{width:100%;margin-top:10px}.hint{border-radius:var(--radius);color:var(--text-dim);background:#6f9fd81a;border:1px solid #6f9fd84d;align-items:flex-start;gap:10px;margin-top:10px;padding:10px 12px;font-size:12.5px;display:flex}.control-group{margin-bottom:14px}.control-group__label,.exportbar__label{color:var(--text-dim);margin-bottom:6px;font-size:12px;display:block}.segment{background:var(--bg-elev2);border:1px solid var(--border);border-radius:var(--radius);gap:3px;padding:3px;display:flex}.segment__btn{font:inherit;color:var(--text-dim);cursor:pointer;background:0 0;border:0;border-radius:7px;flex:1;min-height:40px;padding:8px 4px;font-size:13px}.segment__btn.is-active{background:var(--accent);color:var(--accent-contrast);font-weight:600}.segment.is-disabled,.slider.is-disabled{opacity:.4;pointer-events:none}.slider{margin:12px 0}.slider__head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px;display:flex}.slider__label{color:var(--text-dim);font-size:13px}.slider__value{font:inherit;font-variant-numeric:tabular-nums;color:var(--text);background:var(--bg-elev2);border:1px solid var(--border);cursor:text;border-radius:6px;min-height:28px;padding:2px 8px;font-size:13px}.slider__number{font:inherit;background:var(--bg-elev2);width:84px;color:var(--text);border:1px solid var(--accent);border-radius:6px;padding:2px 6px}.slider__range{width:100%;height:var(--tap);cursor:pointer;accent-color:var(--accent);background:0 0;margin:0}.accordion{border-top:1px solid var(--border);margin-top:6px}.accordion__toggle{width:100%;font:inherit;color:var(--text);min-height:var(--tap);cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:8px;padding:12px 2px;display:flex}.accordion__chevron{color:var(--text-faint);width:1em}.accordion__label{font-size:13px;font-weight:600}.accordion__body{padding:0 2px 6px}.reset-btn{width:100%;margin-top:4px}.preview{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.preview.is-disabled{opacity:.6}.preview__tabs{border-bottom:1px solid var(--border);background:var(--bg-elev);gap:2px;padding:6px;display:flex}.preview__tab{font:inherit;color:var(--text-dim);cursor:pointer;background:0 0;border:0;border-radius:7px;min-height:40px;padding:8px 14px;font-size:13px}.preview__tab.is-active{background:var(--bg-elev2);color:var(--text);font-weight:600}.preview__stage{background:#0e0f11;flex:1;min-height:240px;position:relative;overflow:hidden}.preview__canvas{width:100%;height:100%;display:block}.preview__ref-thumb{cursor:zoom-in;transform-origin:100% 0;z-index:3;border:2px solid #fff9;border-radius:6px;transition:transform .15s;position:absolute;top:10px;right:10px;overflow:hidden;box-shadow:0 2px 8px #00000080}.preview__ref-thumb.is-expanded{cursor:zoom-out;transform:scale(2.4)}.preview__ref-canvas{display:block}.preview__handle{width:var(--tap);cursor:ew-resize;z-index:4;touch-action:none;background:0 0;border:0;padding:0;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.preview__handle:before{content:"";background:#ffffffd9;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.preview__handle:after{content:"⇔";color:#111;background:#ffffffeb;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:15px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 6px #00000080}.preview__overlay{z-index:6;background:#0e0f118c;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.preview__skeleton{opacity:.6;background:linear-gradient(100deg,#1b1d20 30%,#26292e 50%,#1b1d20 70%) 0 0/200% 100%;animation:1.2s linear infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.preview__progress{z-index:1;background:var(--bg-elev2);border-radius:999px;width:60%;max-width:240px;height:4px;position:relative;overflow:hidden}.preview__progress-fill{background:var(--accent);width:0%;height:100%;transition:width .2s}.preview__progress-text{z-index:1;color:var(--text-dim);font-size:12px;position:relative}.preview__empty{text-align:center;color:var(--text-faint);justify-content:center;align-items:center;padding:20px;font-size:13px;display:flex;position:absolute;inset:0}.exportbar{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;display:flex}.block-exportbar.exportbar{margin-top:12px}.exportbar__opt-toggle{font:inherit;color:var(--text-dim);background:var(--bg-elev2);border:1px solid var(--border);cursor:pointer;border-radius:8px;min-width:40px;min-height:40px;display:none}.exportbar__options{flex-wrap:wrap;flex:1;align-items:center;gap:12px;display:flex}.exportbar__sizes{align-items:center;gap:6px;display:flex}.exportbar__sizes .exportbar__label{margin:0}.exportbar__size{font:inherit;color:var(--text-dim);background:var(--bg-elev2);border:1px solid var(--border);cursor:pointer;border-radius:7px;min-width:40px;min-height:40px;padding:0 8px;font-size:13px}.exportbar__size.is-active{background:var(--accent);color:var(--accent-contrast);border-color:#0000;font-weight:600}.exportbar__name{flex:1;align-items:center;gap:6px;min-width:160px;display:flex}.exportbar__name .exportbar__label{margin:0}.exportbar__name-input{font:inherit;background:var(--bg-elev2);min-width:0;color:var(--text);border:1px solid var(--border);border-radius:7px;flex:1;min-height:40px;padding:8px 10px}.exportbar__actions{align-items:center;gap:8px;display:flex}@media (width<=767px){.exportbar__opt-toggle{order:-1;justify-content:center;align-items:center;display:inline-flex}.exportbar__options{flex-basis:100%;order:3;display:none}.exportbar.is-options-open .exportbar__options{display:flex}.exportbar__actions{flex:1;justify-content:flex-end}.exportbar__png{display:none}.exportbar.is-options-open .exportbar__png{display:inline-flex}}.toast-host{z-index:100;flex-direction:column;gap:8px;width:min(92vw,420px);display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.toast{background:var(--bg-elev2);border:1px solid var(--border);border-left-width:4px;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;font-size:13px;animation:.2s toast-in;display:flex;box-shadow:0 4px 16px #00000080}.toast.is-leaving{opacity:0;transition:opacity .2s}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.toast--error{border-left-color:var(--danger)}.toast--warning{border-left-color:var(--warn)}.toast--info{border-left-color:var(--accent)}.toast__text{flex:1}.toast__close{font:inherit;color:var(--text-dim);cursor:pointer;background:0 0;border:0;padding:0 4px;font-size:18px;line-height:1}.modal-overlay{z-index:200;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-overlay[hidden]{display:none}.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;width:min(92vw,560px);max-height:88dvh;padding:20px;overflow:auto}.modal__header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.modal__title{margin:0;font-size:18px}.modal__close{font:inherit;color:var(--text-dim);cursor:pointer;min-width:var(--tap);min-height:var(--tap);background:0 0;border:0;font-size:22px;line-height:1}.modal__footer{justify-content:flex-end;margin-top:16px;display:flex}.help-steps{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.help-step{background:var(--bg-elev2);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:14px}.help-step__emoji{font-size:30px}.help-step__title{margin:6px 0 4px;font-size:14px;font-weight:600}.help-step__body{color:var(--text-dim);font-size:12.5px}.help-range{border-radius:var(--radius);background:#6f9fd814;border:1px solid #6f9fd840;margin-top:16px;padding:12px 14px}.help-range__title{margin:0 0 6px;font-size:14px}.help-range__body{color:var(--text-dim);margin:0;font-size:12.5px}