:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.5}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:light-dark(#f5f5f7,#1c1c1e);color:light-dark(#1c1c1e,#f5f5f7)}#app{max-width:1200px;margin:0 auto;padding:1.5rem}header h1{margin:0 0 .25rem;font-size:1.5rem}header p{margin:0 0 1.25rem;color:light-dark(#6e6e73,#a1a1a6);font-size:.9rem}main{display:grid;grid-template-columns:280px 1fr;gap:1.5rem;align-items:start}@media(max-width:720px){main{grid-template-columns:1fr}}.controls{display:flex;flex-direction:column;gap:1rem}.dropzone{position:relative;display:flex;align-items:center;justify-content:center;min-height:110px;border:2px dashed light-dark(#c7c7cc,#48484a);border-radius:10px;cursor:pointer;overflow:hidden;text-align:center;background:light-dark(#ffffff,#2c2c2e)}.dropzone.dragover{border-color:#0a84ff;background:light-dark(#eaf3ff,#12314f)}.dropzone .thumbnail{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.85}.dropzone-label{position:relative;padding:.5rem;font-size:.9rem}.dropzone.filled .dropzone-label{background:light-dark(rgb(255 255 255 / 75%),rgb(0 0 0 / 55%));border-radius:6px}#preset-group{display:flex;flex-direction:column;gap:.5rem;border:1px solid light-dark(#c7c7cc,#48484a);border-radius:10px;padding:.5rem .75rem .75rem}#preset-group label{position:relative;display:flex;align-items:center;justify-content:center;padding:.45rem .75rem;border:1px solid light-dark(#c7c7cc,#48484a);border-radius:8px;background:light-dark(#ffffff,#2c2c2e);font-size:.9rem;cursor:pointer;-webkit-user-select:none;user-select:none}#preset-group input[type=radio]{position:absolute;width:1px;height:1px;opacity:0}#preset-group label:has(input:checked){border-color:#0a84ff;background:light-dark(#eaf3ff,#12314f)}#preset-group label:has(input:focus-visible){outline:2px solid #0a84ff;outline-offset:2px}.slider-row{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.slider-row input[type=range]{flex:1}.slider-row output{min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}.viewport-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.viewport-row .hint{font-size:.8rem;color:light-dark(#6e6e73,#a1a1a6)}#viewport-reset{padding:.25rem .75rem;border:1px solid light-dark(#c7c7cc,#48484a);border-radius:8px;background:light-dark(#ffffff,#2c2c2e);color:inherit;font-size:.85rem;cursor:pointer}#download{padding:.6rem;border:none;border-radius:10px;background:#0a84ff;color:#fff;font-size:1rem;cursor:pointer}#download:disabled{background:light-dark(#c7c7cc,#48484a);cursor:not-allowed}#info{margin:0;font-size:.8rem;color:light-dark(#6e6e73,#a1a1a6);white-space:pre-wrap}#error{margin:0;color:#ff453a;font-size:.9rem}.preview{display:flex;align-items:center;justify-content:center;min-height:400px;border-radius:10px;background:repeating-conic-gradient(light-dark(#e5e5ea,#3a3a3c) 0% 25%,light-dark(#ffffff,#2c2c2e) 0% 50%) 0 0 / 24px 24px}.preview canvas{max-width:100%;max-height:80vh;border-radius:6px;box-shadow:0 4px 24px #00000040;touch-action:none;cursor:grab}.preview canvas:active{cursor:grabbing}#placeholder{color:light-dark(#6e6e73,#a1a1a6);padding:1rem;background:light-dark(rgb(255 255 255 / 80%),rgb(0 0 0 / 55%));border-radius:8px}