:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{min-height:100vh;padding:24px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.title{margin-top:0;margin-bottom:16px}.row{display:flex;gap:24px;flex-wrap:wrap}.panel{min-width:280px;max-width:360px;border:1px solid #ddd;border-radius:12px;padding:16px;background:#fff;color:#111}.fileBtn{display:inline-block;padding:8px 12px;border:1px solid #bbb;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;color:#111}.controls{display:grid;gap:12px;margin-top:8px}.controlHeader{display:flex;justify-content:space-between}.range{width:100%}.select{width:100%;padding:6px;background:#fff;color:#111;border:1px solid #bbb;border-radius:8px}.smallNote{opacity:.7;font-size:12px;margin-top:12px}.error{color:#dc143c;margin-top:12px}.btn{padding:6px 8px;border-radius:8px;border:1px solid #bbb;background:#fff;color:#111;cursor:pointer}.btn--export{width:100%}.btn:hover,.fileBtn:hover{filter:brightness(.98)}.btn:active,.fileBtn:active{filter:brightness(.95)}.btn:focus-visible,.fileBtn:focus-visible,.select:focus-visible,.range:focus-visible{outline:2px solid #4c9aff;outline-offset:2px}.btnRow{display:flex;flex-wrap:wrap;gap:10px}.btnRow--export .btn:nth-child(1),.btnRow--export .btn:nth-child(2){flex:0 0 calc(50% - 5px)}.preview{display:block}.placeholder{margin:0 0 8px}.thumbStrip{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px;max-width:1000px}.thumbBtn{position:relative;padding:0;border:2px solid transparent;border-radius:10px;background:transparent;cursor:pointer}.thumbBtn.active{border-color:#4c9aff}.thumbImg{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}.thumbIndex{position:absolute;bottom:4px;right:4px;font-size:12px;padding:2px 6px;border-radius:999px;background:#000000a6;color:#fff}@media(prefers-color-scheme:dark){.panel{background:#1f1f1f;color:#eaeaea;border-color:#3a3a3a}.fileBtn,.btn,.select{background:#2a2a2a;color:#f5f5f5;border-color:#555}.btn:hover,.fileBtn:hover{background:#313131}.btn:active,.fileBtn:active{background:#373737}}.sectionTitle{margin:16px 0 6px;font-weight:600}.input{width:100%;padding:6px 8px;border:1px solid #bbb;border-radius:8px;background:#fff;color:#111}.inputRow{display:grid;grid-template-columns:1fr 120px;gap:8px;align-items:center}@media(prefers-color-scheme:dark){.input{background:#2a2a2a;color:#f5f5f5;border-color:#555}}