:root{--ink:#292722;--muted:#77736b;--line:#e8e3d9;--cream:#fbfaf6;--paper:#fff;--coral:#f46f54;--coral-dark:#df563d;--yellow:#ffd95a;--mint:#dff1e6;--blue:#dcecf7;--shadow:0 14px 40px #382f1f14}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #f46f5447}.app-shell{min-height:100vh}.topbar{border-bottom:1px solid var(--line);z-index:20;background:#fffffff5;align-items:center;gap:42px;height:76px;padding:0 max(28px,50vw - 620px);display:flex;position:relative}.brand{cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:11px;padding:0;display:flex}.brand>span:last-child{flex-direction:column;display:flex}.brand b{letter-spacing:.04em;font-size:19px}.brand small{color:#9b968d;margin-top:1px;font-size:10px}.logo{background:#fff1d3;border-radius:10px;grid-template-rows:repeat(2,9px);grid-template-columns:repeat(2,9px);place-content:center;gap:3px;width:37px;height:37px;display:grid;transform:rotate(-4deg)}.logo span{background:var(--coral);border-radius:3px}.logo span:nth-child(2){background:var(--yellow)}.logo span:nth-child(3){background:#64bca7}.logo span:nth-child(4){background:#75a9d0}.topbar nav{align-self:stretch;display:flex}.topbar nav button{color:#68645c;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;align-items:center;gap:8px;padding:0 20px;display:flex}.topbar nav button svg{width:17px}.topbar nav button.active{color:var(--coral-dark);border-color:var(--coral);font-weight:700}.topbar nav em{background:#f1eee8;border-radius:20px;padding:2px 7px;font-size:11px;font-style:normal}.top-create{margin-left:auto}.primary,.secondary,.danger{cursor:pointer;border:0;border-radius:9px;justify-content:center;align-items:center;gap:8px;padding:10px 17px;font-weight:700;transition:all .18s;display:inline-flex}.primary{background:var(--coral);color:#fff;box-shadow:0 5px 14px #f46f5438}.primary:hover{background:var(--coral-dark);transform:translateY(-1px)}.secondary{border:1px solid var(--line);background:#fff}.secondary:hover{background:#fdfcf9;border-color:#cfc7b9}.danger{color:#fff;background:#e85043}.primary svg,.secondary svg,.danger svg{width:18px;height:18px}.big{padding:14px 23px;font-size:15px}.mobile-menu{display:none}.hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;max-width:1240px;min-height:600px;margin:0 auto;padding:76px 32px;display:grid}.eyebrow{color:#d75943;background:#fff0e9;border-radius:30px;align-items:center;gap:7px;padding:8px 13px;font-size:13px;font-weight:700;display:inline-flex}.eyebrow svg{width:15px}.hero h1{letter-spacing:-.04em;margin:23px 0 18px;font-size:55px;line-height:1.18}.hero h1 span{color:var(--coral)}.hero-copy>p{color:#706c64;max-width:530px;font-size:17px;line-height:1.9}.hero-actions{gap:12px;margin-top:28px;display:flex}.trust{color:#777269;gap:25px;margin-top:27px;font-size:12px;display:flex}.trust span{align-items:center;gap:5px;display:flex}.trust svg{color:#53a176;width:16px}.hero-art{background:#fff0d9;border-radius:48% 44% 42% 48%;justify-content:center;align-items:center;height:440px;display:flex;position:relative}.hero-art:before,.hero-art:after{content:"";background:#d8eee4;border-radius:50%;width:80px;height:80px;position:absolute;top:24px;right:-20px}.hero-art:after{background:#f9c6b9;width:50px;height:50px;top:auto;bottom:30px;left:-15px}.hero-card{background:#fff;border-radius:18px;padding:26px;position:relative;transform:rotate(2deg);box-shadow:0 25px 60px #47351926}.decor{color:#e5a83b;font-size:30px;position:absolute}.d1{top:50px;left:32px}.d2{bottom:45px;right:30px}.floating-count{box-shadow:var(--shadow);background:#fff;border-radius:10px;align-items:center;gap:8px;padding:13px 15px;font-size:12px;display:flex;position:absolute;bottom:35px;right:-55px}.floating-count span{border-radius:4px;width:14px;height:14px}.floating-count b{margin-left:12px}.mini-grid{aspect-ratio:1;background:#f6f2e9;border-radius:8px;gap:1px;width:100%;padding:5px;display:grid;box-shadow:inset 0 0 0 1px #ece6db}.mini-grid.large{width:290px}.mini-grid span{border-radius:18%;box-shadow:inset 0 0 0 .5px #00000012}.steps{text-align:center;background:#fff;border-block:1px solid #f0ece4;padding:75px 32px}.overline{color:var(--coral);letter-spacing:.14em;margin:0 0 10px;font-size:12px;font-weight:800}.steps h2,.featured h2,.section-heading h2{margin:0;font-size:31px}.step-list{grid-template-columns:repeat(3,1fr);gap:28px;max-width:1100px;margin:48px auto 0;display:grid}.step-list article{text-align:left;gap:17px;display:flex;position:relative}.step-list i{background:var(--ink);color:#fff;border:3px solid #fff;border-radius:50%;place-items:center;width:22px;height:22px;font-size:10px;font-style:normal;display:grid;position:absolute;top:-12px;left:45px}.step-icon{border-radius:16px;flex:0 0 60px;place-items:center;height:60px;display:grid}.step-icon svg{width:25px}.step-icon.coral{color:#df654c;background:#fbe3dd}.step-icon.yellow{color:#c79018;background:#fff2bd}.step-icon.blue{color:#4884a7;background:#e2eff8}.step-list h3{margin:2px 0 7px;font-size:17px}.step-list p{color:var(--muted);margin:0;font-size:13px;line-height:1.75}.featured{max-width:1180px;margin:0 auto;padding:78px 28px 100px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:30px;display:flex}.section-heading button{color:var(--coral-dark);cursor:pointer;background:0 0;border:0;align-items:center;font-weight:700;display:flex}.section-heading svg{width:17px}.template-grid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.template-card{border:1px solid var(--line);background:#fff;border-radius:15px;transition:all .2s;overflow:hidden}.template-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.template-preview{background:#f3efe6;padding:30px;position:relative}.template-preview .mini-grid{max-width:190px;margin:auto}.template-preview .tag{background:#ffffffd9;border-radius:20px;padding:4px 9px;font-size:11px;position:absolute;top:12px;left:12px}.template-preview button{opacity:0;background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;gap:7px;width:calc(100% - 40px);padding:10px;transition:all .2s;display:flex;position:absolute;inset:auto 20px 16px;transform:translateY(8px)}.template-preview button svg{width:16px}.template-card:hover .template-preview button,.template-preview button:focus{opacity:1;transform:none}.template-card>div:last-child{padding:17px 18px;position:relative}.template-card h3{margin:0 0 5px;font-size:16px}.template-card p{color:var(--muted);margin:0;font-size:12px}.template-card>div:last-child>span{color:#a19b90;font-size:10px;position:absolute;top:18px;right:17px}.continue{background:#fff8f3;border:1px solid #f0cdbd;border-radius:15px;justify-content:space-between;align-items:center;max-width:1120px;margin:-50px auto 80px;padding:18px 23px;display:flex}.continue>div{align-items:center;gap:12px;display:flex}.continue svg{color:var(--coral)}.continue b,.continue p{margin:0;display:block}.continue p{color:var(--muted);margin-top:3px;font-size:12px}.page-wrap{max-width:1180px;margin:0 auto;padding:65px 28px 100px}.page-title h1{margin:0 0 12px;font-size:38px}.page-title>p:last-child{color:var(--muted);margin:0}.filters{gap:8px;margin:35px 0 27px;display:flex}.filters button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:30px;padding:8px 18px}.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.gallery-grid{grid-template-columns:repeat(3,1fr)}.gallery-grid .template-preview{padding:40px}.saved-head{justify-content:space-between;align-items:center;display:flex}.saved-grid{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;display:grid}.saved-card{border:1px solid var(--line);background:#fff;border-radius:15px;overflow:hidden}.saved-preview{cursor:pointer;background:#f2eee5;border:0;width:100%;padding:25px}.saved-preview .mini-grid{max-width:190px;margin:auto}.saved-info{padding:18px}.saved-info h3{margin:0 0 5px}.saved-info p,.saved-info small{color:var(--muted);margin:0;font-size:12px;display:block}.saved-info small{margin-top:5px}.saved-info>div{gap:7px;margin-top:15px;display:flex}.saved-info button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:7px;align-items:center;gap:5px;height:35px;padding:0 10px;display:flex}.saved-info button:first-child{margin-right:auto}.saved-info button svg{width:15px}.saved-info button.delete{color:#d14b3f}.empty-saved{text-align:center;background:#fff;border:1px dashed #dcd5c8;border-radius:18px;margin-top:50px;padding:80px 20px}.empty-saved>span{width:70px;height:70px;color:var(--coral);background:#fff0e9;border-radius:50%;place-items:center;margin:auto;display:grid}.empty-saved h2{margin:20px 0 8px}.empty-saved p{color:var(--muted);margin:0 0 25px}.editor-page{padding:28px max(20px,50vw - 730px) 60px}.editor-head{justify-content:space-between;align-items:end;margin-bottom:21px;display:flex}.back{color:#928c82;background:0 0;border:0;align-items:center;padding:0;font-size:12px;display:flex}.back svg{width:13px}.title-input{background:0 0;border:0;width:330px;padding:5px 0 0;font-size:25px;font-weight:800}.head-actions{align-items:center;gap:8px;display:flex}.local-note{color:#979188;margin-right:7px;font-size:11px}.editor-layout{grid-template-columns:225px minmax(440px,1fr) 235px;align-items:start;gap:15px;display:grid}.tool-panel,.canvas-panel,.count-panel{border:1px solid var(--line);background:#fff;border-radius:13px}.tool-panel{padding:19px}.tool-panel section{border-bottom:1px solid #eeeae2;margin-bottom:20px;padding-bottom:21px}.section-label{margin-bottom:10px;font-size:12px;font-weight:800;display:block}.size-options{grid-template-columns:1fr 1fr;gap:7px;display:grid}.size-options button,.tool-options button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:7px;padding:8px 3px;font-size:12px}.size-options button.selected,.tool-options button.selected{border-color:var(--coral);color:#dc5c44;background:#fff5f1;font-weight:700}.tool-options{grid-template-columns:1fr 1fr;gap:7px;display:grid}.tool-options button{text-align:left;grid-template-columns:18px 1fr;align-items:center;gap:5px;padding:9px;display:grid}.tool-options svg{width:17px}.tool-options kbd{color:#a09a90;grid-column:2;font-size:9px;font-weight:400}.palette{grid-template-columns:repeat(5,1fr);gap:7px;display:grid}.palette button{aspect-ratio:1;cursor:pointer;background:0 0;border:2px solid #0000;border-radius:8px;padding:3px}.palette button span{background:var(--swatch);border-radius:5px;width:100%;height:100%;display:block;box-shadow:inset 0 0 0 1px #0000001f}.palette button.active{border-color:var(--ink)}.chosen{align-items:center;margin-top:12px;font-size:11px;display:flex}.chosen>span{border:1px solid #ccc;border-radius:4px;width:13px;height:13px;margin-right:6px}.chosen code{color:#aaa;margin-left:auto;font-size:9px}.clear-btn{color:#9b5046;cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;margin:auto;font-size:12px;display:flex}.clear-btn svg{width:15px}.canvas-panel{min-width:0;overflow:hidden}.canvas-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:53px;padding:0 14px;display:flex}.canvas-toolbar>div{align-items:center;gap:4px;display:flex}.canvas-toolbar button{cursor:pointer;background:0 0;border:0;border-radius:7px;place-items:center;width:34px;height:34px;display:grid}.canvas-toolbar button:hover{background:#f4f1eb}.canvas-toolbar button:disabled{opacity:.3}.canvas-toolbar svg{width:17px}.divider{border-left:1px solid var(--line);height:20px;margin:0 8px}.tool-status{color:var(--muted);align-items:center;gap:5px;font-size:11px;display:flex}.tool-status svg{width:14px;color:var(--coral)}.zoom-value{text-align:center;width:40px;font-size:11px}.canvas-scroll{background:#f0ede6;justify-content:center;align-items:center;height:min(68vh,700px);min-height:470px;padding:45px;display:flex;overflow:auto}.grid-with-coords{--cell:calc(29px * var(--zoom));grid-template-columns:24px calc(var(--cell) * var(--size));grid-template-rows:22px calc(var(--cell) * var(--size));filter:drop-shadow(0 8px 16px #30291d1f);display:grid}.col-coords{grid-column:2;grid-template-columns:repeat(var(--size),var(--cell));color:#918b81;text-align:center;align-items:center;font-size:8px;display:grid}.row-coords{grid-row:2;grid-template-rows:repeat(var(--size),var(--cell));color:#918b81;text-align:center;align-items:center;font-size:8px;display:grid}.bead-grid{width:calc(var(--cell) * var(--size));height:calc(var(--cell) * var(--size));touch-action:none;background:#ded8cc;border-top:1px solid #cfc7b9;border-left:1px solid #cfc7b9;grid-area:2/2;display:grid}.bead-grid button{cursor:crosshair;border:1px solid #d9d3c8;border-top:0;border-left:0;min-width:0;padding:0}.bead-grid button:hover{box-shadow:inset 0 0 0 2px var(--coral);z-index:1}.canvas-foot{color:#928c82;justify-content:space-between;align-items:center;height:43px;padding:0 15px;font-size:10px;display:flex}.canvas-foot b{color:var(--coral)}.count-panel{overflow:hidden}.count-title{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:17px;display:flex}.count-title>div>span{margin-right:8px;font-size:13px;font-weight:800}.count-title>div>b{color:var(--coral);font-size:16px}.count-title>span{color:var(--muted);font-size:10px}.count-list{max-height:420px;padding:8px 15px;overflow:auto}.count-list>div{border-bottom:1px solid #f2eee8;grid-template-columns:19px 1fr auto;align-items:center;padding:9px 0;font-size:11px;display:grid}.count-dot{border:1px solid #ccc;border-radius:4px;width:14px;height:14px}.count-list small{color:#aaa;margin-top:2px;font-size:8px;display:block}.count-list b{font-size:12px}.count-total{background:#faf8f3;justify-content:space-between;padding:15px;font-size:12px;display:flex}.count-total b{font-size:15px}.empty-count{text-align:center;color:var(--muted);padding:50px 25px}.empty-count>span{color:#ddd5c7;font-size:40px}.empty-count b{color:var(--ink);margin:12px 0 7px;font-size:13px;display:block}.empty-count p{margin:0;font-size:10px;line-height:1.6}.print-tip{color:#4a8064;background:#edf6f1;border-radius:8px;gap:9px;margin:14px;padding:11px;display:flex}.print-tip svg{width:17px}.print-tip b{font-size:10px}.print-tip p{color:#65917a;margin:2px 0 0;font-size:9px}.onboard{background:#fff6dd;border:1px solid #f3dd99;border-radius:11px;align-items:center;gap:12px;margin-bottom:15px;padding:13px 16px;display:flex;position:relative}.onboard-icon{background:#ffdd6a;border-radius:9px;place-items:center;width:38px;height:38px;display:grid}.onboard-icon svg{width:18px}.onboard b{font-size:12px}.onboard p{color:#796e51;margin:3px 0 0;font-size:10px}.onboard>button:not(.icon-x){background:var(--ink);color:#fff;border:0;border-radius:7px;align-items:center;gap:5px;margin-left:auto;padding:8px 12px;font-size:10px;display:flex}.onboard button svg{width:13px}.icon-x{background:0 0;border:0;padding:4px}.modal-backdrop{z-index:100;background:#18161280;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{text-align:center;background:#fff;border-radius:17px;width:min(400px,100%);padding:28px;box-shadow:0 30px 80px #0003}.warning{width:50px;height:50px;color:var(--coral);background:#fff0ec;border-radius:50%;place-items:center;margin:auto;display:grid}.modal h2{margin:17px 0 8px;font-size:20px}.modal p{color:var(--muted);font-size:13px;line-height:1.6}.modal>div{justify-content:center;gap:9px;margin-top:22px;display:flex}.toast{z-index:120;background:var(--ink);color:#fff;box-shadow:var(--shadow);border-radius:10px;align-items:center;gap:8px;padding:12px 18px;font-size:13px;display:flex;position:fixed;bottom:25px;left:50%;transform:translate(-50%)}.toast svg{color:#9de3b7;width:17px}.print-sheet{display:none}@media (max-width:1050px){.editor-layout{grid-template-columns:200px minmax(400px,1fr)}.count-panel{grid-column:1/-1}.count-panel .count-list{grid-template-columns:repeat(4,1fr);display:grid}.hero{gap:30px}.template-grid{grid-template-columns:repeat(2,1fr)}.topbar{gap:16px}.topbar nav button{padding:0 12px}.local-note{display:none}}@media (max-width:760px){.topbar{height:64px;padding:0 16px}.brand small{display:none}.mobile-menu{background:0 0;border:0;place-items:center;margin-left:auto;display:grid}.mobile-menu svg{width:22px}.topbar nav{height:auto;box-shadow:var(--shadow);background:#fff;flex-direction:column;padding:8px 15px;display:none;position:absolute;top:64px;left:0;right:0}.topbar nav.open{display:flex}.topbar nav button{border-bottom:0;border-radius:8px;height:48px}.topbar nav button.active{background:#fff4ef}.top-create{display:none}.hero{text-align:center;flex-direction:column;min-height:0;padding:48px 21px;display:flex;overflow:hidden}.hero h1{font-size:37px}.hero-copy>p{font-size:15px}.hero-actions,.trust{justify-content:center}.trust{flex-wrap:wrap;gap:10px 17px}.hero-art{width:92%;height:340px;margin-top:20px}.mini-grid.large{width:220px}.floating-count{right:-28px}.steps{padding:55px 24px}.steps h2,.featured h2{font-size:25px}.step-list{grid-template-columns:1fr;gap:28px;margin-top:35px}.featured{padding:55px 16px}.section-heading{align-items:center}.section-heading button{font-size:12px}.template-grid,.gallery-grid{grid-template-columns:repeat(2,1fr);gap:11px}.template-preview{padding:21px 18px}.template-preview button{opacity:1;width:100%;margin-top:10px;padding:8px;font-size:11px;position:static;transform:none}.template-card>div:last-child{padding:13px}.template-card>div:last-child>span{display:none}.continue{margin:-25px 16px 55px}.page-wrap{padding:40px 16px 70px}.page-title h1{font-size:30px}.filters{padding-bottom:5px;overflow:auto}.filters button{white-space:nowrap}.saved-head{align-items:end}.saved-head .big{padding:10px;font-size:0}.saved-head .big svg{margin:0}.saved-grid{grid-template-columns:1fr}.editor-page{padding:18px 10px 50px}.editor-head{display:block}.title-input{width:100%;margin-bottom:10px;font-size:21px}.head-actions{grid-template-columns:repeat(3,1fr);display:grid}.head-actions button{padding:9px 4px;font-size:11px}.onboard{align-items:start}.onboard>button:not(.icon-x){display:none}.editor-layout{flex-direction:column;display:flex}.tool-panel{grid-template-columns:1fr 1fr;gap:14px;width:100%;padding:13px;display:grid}.tool-panel section{border:0;margin:0;padding:0}.tool-panel section:nth-child(3){grid-column:1/-1}.palette{grid-template-columns:repeat(8,1fr)}.chosen{display:none}.clear-btn{grid-column:1/-1}.canvas-panel{order:2;width:100%}.count-panel{order:3;width:100%}.canvas-scroll{justify-content:flex-start;height:55vh;min-height:390px;padding:32px 22px}.grid-with-coords{--cell:calc(23px * var(--zoom))}.tool-status{display:none}.count-panel .count-list{grid-template-columns:repeat(2,1fr)}.count-panel .count-list>div:nth-child(odd){margin-right:12px}.gallery-grid .template-preview{padding:25px}.step-list article{max-width:400px;margin:auto}.empty-saved{padding:55px 15px}}@media print{body{background:#fff}.topbar,.editor-head,.onboard,.editor-layout,.toast,.modal-backdrop{display:none!important}.editor-page{padding:0}.print-sheet{color:#111;padding:8mm;display:block}.print-sheet h1{margin:0 0 2mm;font-size:22pt}.print-sheet>p{color:#555;margin:0 0 7mm}.print-body{grid-template-columns:1fr 55mm;align-items:start;gap:8mm;display:grid}.print-grid{aspect-ratio:1;border-top:1px solid #777;border-left:1px solid #777;display:grid}.print-grid span{-webkit-print-color-adjust:exact;print-color-adjust:exact;border-bottom:1px solid #aaa;border-right:1px solid #aaa;position:relative}.print-grid small{color:#444;font-size:5pt;position:absolute}.print-legend h2{margin-top:0;font-size:13pt}.print-legend div{grid-template-columns:8mm 1fr auto;align-items:center;gap:2mm;margin:2mm 0;font-size:9pt;display:grid}.print-legend div>span{-webkit-print-color-adjust:exact;print-color-adjust:exact;border:1px solid #777;border-radius:2mm;place-items:center;width:7mm;height:7mm;font-size:6pt;display:grid}.print-legend em{font-style:normal}.print-sheet footer{color:#777;font-size:8pt;position:fixed;bottom:5mm}@page{size:A4 landscape;margin:10mm}}