@font-face{font-family:"AB Hidden Sans";src:url("assets/ABHiddenSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{font-family:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;color:#25304a;background:#f5f6fa;font-synthesis:none;line-height:1.5;--accent:#6652dc;--muted:#707c92;--line:#e9ecf3}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #afa1f7;outline-offset:3px}[hidden]{display:none!important}
main{max-width:1310px;margin:auto;padding:0 40px 30px}.topbar{height:88px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e4e8f0}.brand{display:flex;gap:13px;align-items:center;color:#202b42;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:-.035em}.brand-mark{display:grid;place-items:center;width:44px;height:44px;background:#6652dc;color:#fff;border-radius:13px;font-size:20px;letter-spacing:-.1em;padding-right:2px;box-shadow:0 6px 15px #6652dc25}.brand small{display:block;font-size:12px;font-weight:400;letter-spacing:.1em;color:#8e97aa}.header-note{font-size:13px;color:#8a94a8}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:30px 0 26px}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:700;color:#707c92}h1{font-size:27px;letter-spacing:-.03em;margin:5px 0 8px;line-height:1.4}.intro p{font-size:14px;color:#8891a4;margin:0}.format-label{font-size:12px;border:1px solid #e1e5ee;border-radius:20px;background:#fff;padding:7px 12px;color:#707c92;white-space:nowrap}
.workspace{display:grid;grid-template-columns:356px minmax(0,1fr);gap:24px;align-items:start}form,.preview-panel{background:#fff;border:1px solid #e5e8f0;border-radius:18px;box-shadow:0 5px 22px #25304a04;overflow:hidden}form{padding:23px}fieldset{border:0;margin:0;padding:0;min-width:0}.form-section{padding:0 0 21px;margin:0 0 20px;border-bottom:1px solid #f0f1f6}.last-section{padding-bottom:0;margin-bottom:20px;border:0}.section-heading{display:flex;align-items:center;gap:9px;margin-bottom:14px}.step{font-size:12px;background:#f1effb;color:#8778d5;border-radius:5px;min-width:24px;height:22px;display:grid;place-items:center;font-weight:700}h2{font-size:15px;font-weight:650;margin:0}.section-aside{font-size:12px;color:#707c92;margin-left:auto}
.upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1.5px dashed #dcd7f1;border-radius:11px;background:#fcfbff;cursor:pointer;padding:17px 14px;text-align:center;overflow:hidden}.upload:hover{border-color:#9384e4;background:#f8f6ff}.upload:focus-within{outline:3px solid #bcb1f3;outline-offset:2px}.upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.upload-icon{font-family:system-ui,sans-serif;font-size:22px;font-weight:400;display:grid;place-items:center;width:34px;height:34px;border:1px solid #e5e0f7;border-radius:10px;color:#9686de;background:#f1edfc;margin-bottom:2px}.upload-title{font-size:14px;font-weight:550;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.upload small{font-size:12px;color:#707c92}.photo-upload.loaded{background:#f8f7fd;border-style:solid}.small-icon{font-size:18px;width:28px;height:28px}.qr-upload{padding:12px;margin-top:14px}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:15px}.mode-switch button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #e5e8f0;border-radius:9px;background:#fff;color:#8b95a9;padding:11px;font-size:13px}.mode-switch button[aria-pressed=true]{color:#6b54d9;background:#f6f3ff;border-color:#b9a9ee;box-shadow:inset 0 0 0 .5px #b9a9ee}.mode-icon{font-size:21px;line-height:1}.text-icon{font-family:Georgia,serif;font-size:20px;font-weight:700}.text-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#62708a;margin-bottom:7px}.weight-tag{border-radius:4px;color:#8b7bce;background:#f1edf9;padding:1px 5px;font-size:12px}textarea{display:block;width:100%;resize:vertical;min-height:84px;max-height:190px;border:1px solid #e2e6ef;border-radius:9px;padding:12px 13px;background:#fcfdff;color:#34405a;font-weight:600;font-size:16px;line-height:1.5}textarea:focus{border-color:#a699e9}textarea::placeholder{color:#b1b7c5;font-weight:400}.text-meta{display:flex;justify-content:space-between;font-size:12px;color:#707c92;margin-top:6px}.text-meta output{font-variant-numeric:tabular-nums}
.range-label{display:flex;justify-content:space-between;font-size:14px;color:#65728a;margin:11px 0 7px}.range-label output{color:#8b7bd1;background:#f4f1fb;border-radius:4px;padding:0 5px;font-size:12px;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;accent-color:#8470e3;height:15px;margin:3px 0 7px;cursor:pointer}.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.advanced{border-top:1px solid #f1f3f7;padding-top:10px;margin-top:12px}.advanced summary{font-size:12px;color:#707c92;cursor:pointer}.hint{font-size:12px;color:#707c92;margin:8px 0 0;line-height:1.7}.placement-tip{font-size:12px;color:#707c92;margin:12px 0 0;line-height:1.6}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-radius:10px;background:#6a54db;box-shadow:0 5px 12px #6652dc20;color:white;padding:12px 15px;font-size:14px;font-weight:550}.primary:hover{background:#5b46cb}.primary>span:last-child{font-size:20px;line-height:1}#status{font-size:12px;color:#707c92;margin:10px 0 0;min-height:17px;line-height:1.7}#status.error{color:#b94444}
.preview-heading{display:flex;align-items:center;justify-content:space-between;padding:21px 23px 17px}.preview-heading h2{font-size:15px}.preview-heading>div{display:flex;align-items:baseline;gap:12px}#dimensions{font-size:12px;color:#707c92;font-variant-numeric:tabular-nums}.result-state{font-size:12px;border:1px solid #e8ebf1;border-radius:5px;color:#a8afbd;padding:3px 7px}.result-state.ready{color:#7360cf;background:#f5f2fe;border-color:#e5ddfa}.preview-toolbar{padding:0 23px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.views{display:flex;padding:3px;background:#f4f5f9;border-radius:8px;gap:3px}.views button{border:0;background:transparent;color:#707c92;padding:7px 12px;border-radius:6px;font-size:12px;white-space:nowrap}.views button[aria-pressed=true]{background:#fff;color:#6e5bc0;box-shadow:0 1px 5px #36415d0d}.preview-scale{font-size:12px;color:#b0b7c4}.preview-body{min-height:554px;margin:0 17px;padding:22px;display:flex;align-items:center;justify-content:center;background-color:#f5f6fa;background-image:linear-gradient(#e8ebf080 1px,transparent 1px),linear-gradient(90deg,#e8ebf080 1px,transparent 1px);background-size:24px 24px;border:1px solid #eceef4;border-radius:11px}.empty{text-align:center;color:#707c92;padding:45px 0}.empty-letters{height:95px;display:flex;justify-content:center;align-items:center;margin-bottom:24px}.empty-letters span{display:grid;place-items:center;width:66px;height:78px;background:#fff;border:1px solid #e5e7ef;border-radius:12px;color:#b5a6e7;font-weight:400;font-size:36px;box-shadow:0 7px 20px #4f4c7110;transform:rotate(-10deg)}.empty-letters span:last-child{background:#686480;color:#e3dafa;transform:rotate(10deg);margin-left:-12px;margin-top:16px;border-color:#686480}.empty h3{font-weight:500;font-size:16px;color:#7e899e;margin:0 0 8px}.empty p{font-size:12px;color:#707c92;margin:0}.empty-caption{display:inline-block;font-size:12px;color:#b7bfd0;letter-spacing:.07em;margin-top:22px}.stage{position:relative;max-width:100%;background:#fff;line-height:0;box-shadow:0 7px 24px #22293815}.stage>img{display:block;width:100%;height:auto;user-select:none}.hidden-box{position:absolute;transform:translate(-50%,-50%);outline:1.5px solid #9b7ff3;cursor:grab;touch-action:none;user-select:none;background:#ffffffc9}.hidden-box:active{cursor:grabbing}.hidden-box img,.hidden-box canvas{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.hidden-box.qr-mode{background:white}.box-label{position:absolute;top:-22px;left:0;font-size:11px;color:white;background:#9577eb;padding:5px 6px;border-radius:4px 4px 0 0;white-space:nowrap;line-height:1;pointer-events:none}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 23px 21px}.preview-footer p{font-size:12px;color:#707c92;margin:0}.result-actions{display:flex;gap:13px;align-items:center;flex-wrap:wrap}.result-actions>a:not(.download){font-size:12px;color:#9883d6;text-decoration:none}.download{border:1px solid #d8cffa;background:#f8f5ff;border-radius:7px;text-decoration:none;padding:8px 11px;color:#7860cb;font-size:12px;white-space:nowrap}
.usage{display:flex;align-items:start;gap:9px;max-width:980px;margin:23px auto 0;font-size:12px;line-height:1.8;color:#707c92}.usage p{margin:0}.usage strong{font-weight:500;color:#8691a7}.info-icon{display:grid;place-items:center;flex-shrink:0;border:1px solid #bfc6d3;border-radius:50%;width:14px;height:14px;line-height:1;margin-top:3px;font-family:Georgia,serif;font-size:12px}.server-warning{color:#b14c35;background:#fff0e9;padding:14px;border-radius:8px}
@media(min-width:980px){.preview-panel{position:sticky;top:22px}}@media(max-width:1050px){main{padding:0 24px 24px}.workspace{grid-template-columns:320px minmax(0,1fr);gap:18px}.preview-toolbar,.preview-heading,.preview-footer{padding-left:16px;padding-right:16px}.views button{padding:7px 8px}.preview-scale{display:none}.preview-body{margin:0 12px;padding:14px}.format-label{display:none}}@media(max-width:780px){main{padding:0 18px 24px}.topbar{height:74px}.header-note{font-size:12px}.intro{margin:23px 0 20px}h1{font-size:24px}.intro p{font-size:13px}.workspace{grid-template-columns:1fr}.preview-panel{position:static}.preview-body{min-height:390px}.preview-heading>div{flex-wrap:wrap;gap:4px 10px}form{padding:22px}.mode-switch button{padding:13px}.upload input{font-size:16px}.preview-toolbar .views{flex:1;justify-content:center}.views button{flex:1}.usage{padding:0 3px}.brand{font-size:18px}.brand-mark{width:40px;height:40px}.eyebrow{font-size:11px}}@media(prefers-reduced-motion:no-preference){button,a,.upload{transition:background .15s,border-color .15s,box-shadow .15s}}
@media(max-width:380px){.mode-switch button{gap:6px;padding:11px 5px;white-space:nowrap}.mode-icon{font-size:18px}.header-note{font-size:11px}}