:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#282437;background:#f9f8fc}*{box-sizing:border-box}body{margin:0}.page{max-width:1160px;margin:auto;padding:25px 16px 90px}.back{color:#7658ef;text-decoration:none;font-weight:700}header{margin:25px 0}header p{font-size:12px;letter-spacing:.16em;color:#7658ef}header h1{font-size:30px;margin:5px 0}header span,.card>p{color:#777186}.layout{display:grid;grid-template-columns:minmax(330px,470px) minmax(0,1fr);gap:20px}.card{min-width:0;background:#fff;border:1px solid #e5e0ef;border-radius:16px;padding:20px}.card h2{font-size:18px;margin:4px 0 15px}.card h2:not(:first-child){margin-top:25px}.card label{display:grid;gap:7px;margin:12px 0;font-size:13px;font-weight:700}.card input[type=file],.card input[type=text],.card select{width:100%;padding:10px;border:1px solid #dbd4e6;border-radius:8px;font:inherit}.card input[type=range]{width:100%}.card label[hidden]{display:none}.card label small{color:#777186;font-size:12px;font-weight:400}.method-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.method-list button{border:1px solid #dbd4e6;border-radius:10px;background:#fff;color:#443b56;padding:10px 6px;font:inherit;font-size:13px;font-weight:700}.method-list small{display:block;color:#827b8f;font-size:11px;font-weight:400}.method-list button.selected{border-color:#7658ef;background:#f3efff;color:#694bd6}.method-list button:disabled{opacity:.6;cursor:not-allowed}.tabs{display:flex;gap:8px}.tabs button{flex:1;padding:10px;border:1px solid #d9c9f0;border-radius:8px;background:#fff;color:#5d4a88}.tabs button[aria-pressed=true]{background:#7658ef;color:#fff}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.card .check{display:flex;align-items:center}.primary{width:100%;border:0;border-radius:9px;padding:13px;background:#7658ef;color:#fff;font:inherit;font-weight:700}.primary:disabled{opacity:.45}.plain{border:1px solid #ded6ef;border-radius:8px;background:#fff;color:#654dd3;padding:8px 12px;cursor:pointer}.preview canvas{display:block;max-width:100%;height:auto;margin:auto;border-radius:10px;background:#eeebf3}.preview{align-self:start}.canvas-wrap{min-height:180px;display:grid;place-items:center;border-radius:12px;background:#f6f4f9;margin-bottom:20px;overflow:hidden}#status{min-height:22px;color:#7658ef;font-size:13px}.subtle{font-size:12px;line-height:1.5}@media(max-width:760px){.layout{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}header h1{font-size:25px}.method-list button{font-size:12px}}
.download{display:block;text-align:center;margin-top:10px;border:1px solid #7658ef;border-radius:9px;padding:12px;color:#654dd3;text-decoration:none;font-weight:700}.download[hidden]{display:none}
.private-tabs{display:flex;gap:10px;overflow-x:auto;white-space:nowrap;padding:0 0 18px;margin:-4px 0 14px;border-bottom:1px solid #e9e5ef}.private-tabs a{padding:9px 12px;border-radius:9px;color:#777186;text-decoration:none;font-size:13px;font-weight:700}.private-tabs a.active{background:#f1ecff;color:#694bd6}@media(max-width:760px){.private-tabs{margin-right:-16px;padding-right:16px}.private-tabs a{padding:8px 10px}}
.method-list{margin:20px 0 22px;gap:10px}.method-list button{min-height:77px;text-align:left;padding:14px 18px;font-size:15px}.method-list small{margin-top:5px;font-size:12px}.method-list button:disabled{opacity:.68}
.layout{grid-template-columns:minmax(0,414px) minmax(0,1fr)}.page>header{margin:24px 0 20px}.page>header h1{font-size:25px}.page>header span{font-size:13px}.card{padding:20px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h2{margin:2px 0 12px}.sample{border:0;background:transparent;color:#7658ef;font-size:12px;cursor:pointer}
.card .upload{position:relative;min-height:138px;align-content:center;text-align:center;padding:17px;border:1px dashed #d8cfee;border-radius:12px;background:#fbfaff;color:#7658ef;cursor:pointer}.upload:before{content:'⇧';font-size:30px;line-height:1}.upload strong{font-size:13px}.upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.upload small{color:#827b8f}
.tabs{padding:4px;border-radius:10px;background:#f5f3f9}.tabs button{border:0;background:transparent}.tabs button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #443b5620;color:#7658ef}
.number-control{display:inline-flex;align-items:center;gap:3px;max-width:88px;padding:1px 5px;border:1px solid #dfdbe7;border-radius:7px;color:#7a7480;font-weight:400}.number-control input{width:51px;border:0;background:transparent;text-align:right;font:inherit;color:#2d2834}.grid output{font-size:11px;color:#81798b}.grid label{position:relative}.grid .number-control{justify-self:start}
#tileSpacing[hidden]{display:none}
.canvas-wrap{min-height:250px;background-color:#f8f7fa;background-image:linear-gradient(45deg,#eeecf3 25%,transparent 25%),linear-gradient(-45deg,#eeecf3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eeecf3 75%),linear-gradient(-45deg,transparent 75%,#eeecf3 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.preview-empty{display:grid;gap:10px;text-align:center;color:#8e8899;font-size:13px}.preview-empty strong{color:#736782}.preview-empty[hidden]{display:none}.canvas-wrap canvas{max-height:550px;object-fit:contain;background:transparent}
@media(max-width:850px){.layout{grid-template-columns:1fr}.method-list button{min-height:68px;padding:10px;font-size:13px}.page>header{margin:18px 0}}