:root{color:#1a1a1a;background:#f5f5f4;font-family:system-ui,sans-serif;line-height:1.6}*{box-sizing:border-box}body{margin:0}main{max-width:960px;margin:0 auto;padding:24px 16px}h1{margin-bottom:4px;font-size:1.5rem}.lead{color:#57534e;margin-top:0}button{font:inherit;cursor:pointer;background:#fff;border:1px solid #d6d3d1;border-radius:6px;padding:8px 16px}button:hover{background:#fafaf9}.count{color:#78716c;font-size:.875rem}.error{color:#b91c1c}.empty{color:#a8a29e;padding:32px 0}.photoList{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.photoItem{aspect-ratio:1;background:#fff;border:1px solid #e7e5e4;border-radius:6px;position:relative;overflow:hidden}.photoItem img{object-fit:cover;width:100%;height:100%;display:block}.photoIndex{color:#fff;text-align:center;background:#0009;border-radius:10px;min-width:20px;padding:0 6px;font-size:.75rem;position:absolute;top:4px;left:4px}.photoRemove{background:#ffffffe6;padding:2px 8px;font-size:.75rem;position:absolute;bottom:4px;right:4px}h2{color:#57534e;border-bottom:1px solid #e7e5e4;padding-bottom:6px;font-size:1rem}section{margin-top:40px}.settings{flex-wrap:wrap;gap:16px;display:flex}.settingField{color:#57534e;flex-direction:column;gap:4px;font-size:.875rem;display:flex}.settingField input{font:inherit;border:1px solid #d6d3d1;border-radius:6px;width:88px;padding:6px 8px}.sheets{flex-wrap:wrap;gap:24px;display:flex}.sheetFigure{width:min(100%,320px);margin:0}.sheet{aspect-ratio:210/297;background:#fff;border:1px solid #d6d3d1;position:relative;box-shadow:0 1px 4px #00000014}.sheet img{object-fit:fill;position:absolute}figcaption{color:#a8a29e;text-align:center;margin-top:6px;font-size:.75rem}.export{align-items:center;gap:12px;margin-bottom:16px;display:flex}button:disabled{color:#a8a29e;cursor:not-allowed}