:root{color:#172133;font-synthesis:none;background:#f4f7fb;font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{margin:0}.site-header{background:#fff;border-bottom:1px solid #e5eaf1;min-height:68px;padding:0 max(24px,50% - 590px)}.header-inner{align-items:center;gap:20px;min-height:68px;display:flex}.brand{white-space:nowrap;align-items:center;gap:10px;display:flex}.logo{color:#fff;background:#246bfd;border-radius:11px;place-items:center;width:35px;height:35px;font-weight:800;display:grid}.ecosystem-nav{justify-content:center;align-items:center;gap:4px;margin-left:auto;display:flex}.ecosystem-nav a,.ecosystem-nav span{color:#556176;white-space:nowrap;border-radius:9px;padding:7px 10px;font-size:13px;font-weight:650;text-decoration:none}.ecosystem-nav a:hover{color:#246bfd;background:#f0f4ff}.ecosystem-nav .featured{color:#fff;background:#246bfd}.ecosystem-nav .featured:hover{color:#fff;background:#1855d8}.ecosystem-nav .active{color:#246bfd;background:#eaf0ff}.ecosystem-nav [data-tooltip]:focus-visible{outline-offset:2px;outline:2px solid #246bfd}.ecosystem-nav [data-tooltip]:after{content:attr(data-tooltip);z-index:20;color:#fff;white-space:normal;text-align:left;opacity:0;visibility:hidden;pointer-events:none;background:#172133;border-radius:10px;width:max-content;max-width:min(520px,100vw - 24px);padding:10px 12px;font-size:12px;font-weight:500;line-height:1.55;transition:opacity .15s,transform .15s,visibility .15s;position:fixed;top:58px;left:50%;transform:translate(-50%,-4px);box-shadow:0 8px 24px #17213333}.ecosystem-nav [data-tooltip]:hover:after,.ecosystem-nav [data-tooltip]:focus-visible:after{opacity:1;visibility:visible;transform:translate(-50%)}.privacy-badge{color:#18794e;white-space:nowrap;background:#eaf9f1;border-radius:99px;padding:7px 12px;font-size:13px}main{max-width:1180px;margin:auto;padding:44px 24px 60px}.hero{text-align:center;margin-bottom:34px}.eyebrow{color:#246bfd;letter-spacing:.08em;font-weight:700}.hero h1{margin:12px;font-size:clamp(32px,5vw,52px);line-height:1.1}.hero>p:last-child{color:#667085}.workspace{grid-template-columns:360px 1fr;gap:22px;display:grid}.card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:22px;box-shadow:0 8px 30px #1e30500f}.controls{flex-direction:column;gap:14px;display:flex}.step{align-items:center;gap:9px;margin-top:5px;display:flex}.step span{color:#246bfd;background:#eaf0ff;border-radius:50%;place-items:center;width:25px;height:25px;font-weight:800;display:grid}.step h2,.preview-head h2{margin:0;font-size:17px}.upload-zone{cursor:pointer;background:#f9fbff;border:2px dashed #b8c5d8;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;height:120px;display:flex}.upload-zone:hover{border-color:#246bfd}.upload-zone input{opacity:0;pointer-events:none;position:absolute}.upload-zone small{color:#7b8799;margin-top:7px}.primary,.secondary{cursor:pointer;border:0;border-radius:10px;padding:12px 16px;font-weight:700}.primary{color:#fff;background:#246bfd}.primary:disabled{cursor:not-allowed;background:#b8c5d8}.secondary{color:#344054;background:#edf2f8}.status{color:#667085;min-height:18px;margin:0;font-size:13px}label,fieldset{font-size:14px;font-weight:650}select,input[type=number]{background:#fff;border:1px solid #cfd7e4;border-radius:9px;width:100%;margin-top:7px;padding:10px}input[type=range]{accent-color:#246bfd;width:100%}.custom-size{grid-template-columns:1fr 1fr;gap:10px;display:grid}.hidden{display:none}fieldset{border:0;margin:0;padding:0}.swatches{align-items:center;gap:10px;margin-top:9px;display:flex}.swatch{background:var(--swatch);cursor:pointer;border:2px solid #d7deea;border-radius:50%;width:34px;height:34px}.swatch.active{border-color:#246bfd;outline:3px solid #b9cdfd}.color-picker{color:#667085;align-items:center;gap:6px;font-size:12px;display:flex}.color-picker input{background:0 0;border:0;width:34px;height:34px;padding:0}.preview-column{gap:22px;display:grid}.preview-head{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.preview-head span{color:#667085;font-size:13px}.interaction-hint{color:#246bfd;text-align:center;margin:-5px 0 12px;font-size:13px;font-weight:650}.canvas-wrap{background:repeating-conic-gradient(#edf0f4 0 25%,#fff 0 50%) 50%/20px 20px;border-radius:13px;place-items:center;min-height:440px;display:grid;overflow:hidden}.canvas-wrap canvas{max-width:100%;max-height:440px;box-shadow:0 3px 15px #56607540}.canvas-wrap #photoCanvas{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.canvas-wrap #photoCanvas.is-dragging{cursor:grabbing}.canvas-wrap #emptyHint{color:#667085;grid-area:1/1}.canvas-wrap canvas:not([width="300"])+#emptyHint{display:none}.preview-card>.primary,.sheet-card>.primary{width:100%;margin-top:16px}.sheet-card .preview-head select{width:auto;margin:0 0 0 8px}.checkbox{margin-bottom:12px;display:block}.sheet-preview{background:#e9edf3;border-radius:12px;place-items:center;height:400px;display:grid;overflow:hidden}.sheet-preview canvas{max-width:96%;max-height:380px;box-shadow:0 4px 20px #34405440}.sheet-card>p{text-align:center;color:#667085;font-size:13px}.info-grid{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;display:grid}.info-grid article{padding:18px}.info-grid h2{font-size:16px}.info-grid p{color:#667085;font-size:13px;line-height:1.7}footer{text-align:center;color:#7b8799;background:#fff;border-top:1px solid #e2e8f0;padding:26px;font-size:13px}@media (width<=850px){.header-inner{flex-wrap:wrap;gap:8px 14px;padding:10px 0}.ecosystem-nav{order:3;justify-content:flex-start;width:100%;padding-bottom:2px;overflow-x:auto}.workspace{grid-template-columns:1fr}.controls{order:0}.preview-column{order:1}.info-grid{grid-template-columns:1fr}.canvas-wrap{min-height:350px}.privacy-badge{margin-left:auto}}@media (width<=480px){main{padding:28px 14px}.site-header{padding:0 16px}.brand strong{font-size:14px}.privacy-badge{display:none}.ecosystem-nav a,.ecosystem-nav span{padding:7px 9px}.card{padding:16px}.canvas-wrap{min-height:300px}.sheet-preview{height:310px}}