:root{--bg:#f7f2ef;--surface:#fff;--ink:#2a2428;--muted:#6f656c;--line:#eadfd8;--accent:#c45c6a;--accent-soft:#f8e8ea;--accent-2:#5a8fa8;--accent-3:#d4a85c;--accent-ink:#fff;--ok:#3d8f6e;--danger:#c44d4d;--shadow:0 1px 0 #3c282d0a, 0 12px 28px #3c282d0f;--radius:12px;--radius-sm:8px;--font:"Source Sans 3", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;--display:"Outfit", "Source Sans 3", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--bar-h:64px}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;font-family:var(--font);color:var(--ink);background:radial-gradient(900px 480px at 8% -10%, #c45c6a14, transparent 55%), radial-gradient(700px 400px at 100% 0%, #5a8fa812, transparent 50%), var(--bg);margin:0}body{text-rendering:optimizelegibility}button,input,select{font:inherit}#app{min-height:100dvh}.app-shell{max-width:1280px;padding:18px 14px calc(24px + var(--bar-h));margin:0 auto}@media (width>=900px){.app-shell{padding:26px 24px 40px}}.topbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;margin-bottom:18px;padding:14px 16px;display:flex}.brand-wrap{align-items:center;gap:12px;min-width:0;display:flex}.brand-badge{background:linear-gradient(145deg,#d97884,#c45c6a);border-radius:10px;flex-shrink:0;width:40px;height:40px;position:relative;box-shadow:inset 0 1px #ffffff40}.brand-badge:after{content:"";background:#ffffff47;border-radius:50%;width:10px;height:10px;position:absolute;top:10px;left:11px}.brand{font-family:var(--display);letter-spacing:-.03em;color:var(--ink);margin:0;font-size:clamp(1.35rem,2.6vw,1.7rem);font-weight:700;line-height:1.15}.tagline{color:var(--muted);margin:3px 0 0;font-size:.88rem;font-weight:500}.top-stats{flex-wrap:wrap;gap:8px;display:flex}.stat-pill{border:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--muted);background:#faf7f5;border-radius:999px;align-items:center;padding:6px 10px;font-size:.78rem;font-weight:600;display:inline-flex}.stat-pill.accent{color:#8a7040;background:#f4efe4;border-color:#e5d8c4}.layout{gap:14px;display:grid}@media (width>=900px){.layout{grid-template-columns:minmax(0,1fr) 348px;align-items:start;gap:18px}}.stage{min-width:0}.preview-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;min-height:280px;display:flex;position:relative;overflow:hidden}.main-pane{min-height:min(70dvh,820px)}.empty-wrap{min-height:360px}.view-toggle-bar{border-top:1px solid var(--line);background:#faf8f6;flex-shrink:0;justify-content:center;padding:10px 12px;display:flex}.view-toggle-bar .btn{min-width:140px}.pane-toolbar{border-bottom:1px solid var(--line);background:#faf8f6;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;display:flex}.pane-heading{align-items:baseline;gap:10px;min-width:0;display:flex}.pane-title{font-family:var(--display);color:var(--ink);font-size:.88rem;font-weight:650}.pane-meta{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;font-weight:500;overflow:hidden}.zoom-controls{align-items:center;gap:6px;display:flex}.zoom-label{text-align:center;font-variant-numeric:tabular-nums;min-width:3.2em;font-size:.78rem;font-weight:600}.btn-icon{border-radius:var(--radius-sm);place-items:center;width:32px;height:32px;padding:0;font-size:1.1rem;line-height:1;display:grid}.btn-ghost{border-radius:var(--radius-sm);padding:6px 10px;font-size:.78rem}.orig-viewport{background-color:#f6f2ef;background-image:linear-gradient(45deg,#f0ebe7 25%,#0000 25%),linear-gradient(-45deg,#f0ebe7 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f0ebe7 75%),linear-gradient(-45deg,#0000 75%,#f0ebe7 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:14px 14px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;flex:1;place-items:center;min-height:min(50dvh,560px);max-height:min(65dvh,720px);padding:12px;display:grid;overflow:auto}.orig-scaler{place-items:center;min-width:100%;min-height:100%;display:grid}.orig-img{-webkit-user-select:none;user-select:none;border-radius:6px;display:block;box-shadow:0 6px 20px #281e231f}.field-inline{border-top:1px solid var(--line);color:var(--muted);flex-shrink:0;align-items:center;gap:10px;padding:8px 12px 10px;font-size:.78rem;font-weight:500;display:flex}.field-inline input[type=range]{accent-color:var(--accent);flex:1}.preview-scroll{background:#faf8f6;flex:1;place-items:center;height:min(65dvh,760px);min-height:min(55dvh,640px);padding:12px;display:grid;overflow:auto}.preview-scroll canvas{image-rendering:auto;border:1px solid var(--line);max-width:none;box-shadow:var(--shadow);border-radius:6px}.empty-state{text-align:center;color:var(--muted);justify-items:center;gap:8px;padding:48px 24px;display:grid}.bead-row{gap:6px;margin-bottom:10px;display:flex}.bead{border:1px solid #ffffff8c;border-radius:50%;width:14px;height:14px;box-shadow:inset 0 -1px #00000014}.bead.c1{background:#c45c6a}.bead.c2{background:#5a8fa8}.bead.c3{background:#d4a85c}.bead.c4{background:#5a9e7a}.bead.c5{background:#8b7aa8}.empty-state strong{color:var(--ink);font-family:var(--display);margin-bottom:2px;font-size:1.15rem;font-weight:650;display:block}.drop-hint{background:#faf7f5;border:1.5px dashed #d9c8c2;border-radius:10px;max-width:360px;margin-top:10px;padding:16px 18px;font-size:.9rem;font-weight:500;line-height:1.5}.drop-hint b{color:var(--accent);font-weight:700}.drop-hint.is-over{border-color:var(--accent);background:var(--accent-soft)}.busy{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-family:var(--display);color:var(--accent);z-index:2;background:#fffcfac7;place-items:center;font-weight:600;display:grid;position:absolute;inset:0}.side{flex-direction:column;gap:12px;display:flex}.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 12px;box-shadow:0 1px #3c282d08}.block h2{font-family:var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);align-items:center;gap:8px;margin:0 0 12px;font-size:.78rem;font-weight:650;display:flex}.block h2:before{content:"";background:var(--accent);opacity:.85;border-radius:50%;width:7px;height:7px}.row{gap:8px;margin-bottom:10px;display:grid}.row:last-child{margin-bottom:0}.row.inline{grid-template-columns:1fr 1fr;gap:10px}.row.checks{grid-template-columns:1fr 1fr;gap:8px 10px;display:grid}.size-card{background:linear-gradient(135deg,#f8e8ea 0%,#f4efe4 100%);border:1px solid #e5d4d0;border-radius:10px;margin-bottom:12px;padding:12px 14px}.size-card-main{font-family:var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:700}.size-card-sub{color:var(--muted);margin-top:3px;font-size:.8rem;font-weight:500}.seg{border:1px solid var(--line);background:#faf7f5;border-radius:8px;grid-template-columns:1fr 1fr;gap:0;margin-bottom:14px;display:grid;overflow:hidden}.seg-btn{appearance:none;border:0;border-right:1px solid var(--line);color:var(--muted);cursor:pointer;background:0 0;padding:9px 8px;font-size:.82rem;font-weight:600}.seg-btn:last-child{border-right:0}.seg-btn.is-on{background:var(--accent);color:var(--accent-ink)}.control-group{margin-bottom:12px}.control-head{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px;font-size:.76rem;font-weight:600;display:flex}.check.compact{gap:5px;font-size:.76rem}.preset-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.preset-grid.cols-3{grid-template-columns:repeat(3,1fr)}.preset-grid.cols-5{grid-template-columns:repeat(5,1fr)}.wh-row{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.wh-row input{border:1px solid var(--line);width:100%;color:var(--ink);font-variant-numeric:tabular-nums;text-align:center;background:#faf8f6;border-radius:8px;padding:9px 10px;font-weight:600}.wh-x{color:var(--muted);font-weight:600}.chip-row{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.chip{appearance:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;text-align:center;background:#faf7f5;border-radius:8px;padding:8px 6px;font-size:.8rem;font-weight:600;transition:background .14s ease-out,border-color .14s ease-out,color .14s ease-out}.chip:hover{border-color:#d4b8b4}.chip.is-on{background:var(--accent);color:var(--accent-ink);box-shadow:none;border-color:#0000}.advanced{border-top:1px solid var(--line);margin-top:2px;padding-top:6px}.advanced summary{cursor:pointer;color:var(--muted);padding:6px 0;font-size:.8rem;font-weight:600;list-style:none}.advanced summary::-webkit-details-marker{display:none}.advanced summary:before{content:"+ ";color:var(--accent);font-weight:700}.advanced[open] summary:before{content:"− "}.advanced[open]{padding-bottom:2px}label.field{color:var(--muted);gap:4px;font-size:.8rem;font-weight:500;display:grid}label.field span{font-weight:600}label.field input[type=number],label.field select,label.field input[type=text]{border:1px solid var(--line);border-radius:var(--radius-sm);width:100%;color:var(--ink);background:#faf8f6;padding:8px 10px;font-weight:500}label.field input[type=range]{width:100%;accent-color:var(--accent)}.check{color:var(--ink);align-items:center;gap:8px;font-size:.86rem;font-weight:500;display:flex}.btn-row{flex-wrap:wrap;gap:8px;display:flex}.mode-row .btn{border-radius:var(--radius-sm);flex:1}.field-label{color:var(--muted);margin:2px 0 7px;font-size:.76rem;font-weight:600;display:block}.hint-line{color:var(--muted);margin:0 0 10px;font-size:.74rem;font-weight:500;line-height:1.4}label.field input:disabled{opacity:.4}.btn{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);cursor:pointer;box-shadow:none;padding:8px 14px;font-size:.88rem;font-weight:600;transition:background .14s ease-out,border-color .14s ease-out,transform .14s ease-out}.btn:hover{background:#faf7f5;border-color:#d4b8b4}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}.btn-primary:hover{filter:brightness(1.04);background:var(--accent);border-color:#0000}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.file-btn{text-align:center;width:100%;position:relative;overflow:hidden}.file-btn input{opacity:0;cursor:pointer;position:absolute;inset:0}.meta{color:var(--muted);margin:0 0 8px;font-size:.84rem;font-weight:500}.file-name{text-overflow:ellipsis;white-space:nowrap;margin-top:8px;overflow:hidden}.counts{gap:2px;max-height:220px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.counts li{border-radius:6px;grid-template-columns:16px 1fr auto;align-items:center;gap:8px;padding:5px 6px;font-size:.86rem;font-weight:500;display:grid}.counts li:nth-child(odd){background:#faf7f5}.swatch{border:1px solid #281e2326;border-radius:3px;width:14px;height:14px}.error{color:var(--danger);margin:8px 0 0;font-size:.86rem;font-weight:600}.export-bar{z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffcfaf0;justify-content:center;gap:8px;display:flex;position:fixed;bottom:0;left:0;right:0}.export-hint{color:var(--muted);text-align:center;margin:8px 0 0;font-size:.76rem;font-weight:500}.export-hint a{color:var(--accent);font-weight:650}.site-footer{border-top:1px solid var(--line);text-align:center;margin-top:28px;padding-top:16px}.footer-line{color:var(--muted);margin:0 0 6px;font-size:.74rem;line-height:1.6}.footer-line:last-child{margin-bottom:0}.footer-line a{color:var(--muted);text-decoration:none;transition:color .15s}.footer-line a:hover{color:var(--accent);text-decoration:underline}.license-pill{cursor:pointer;border:1px solid var(--line);background:#fff}.license-pill.ok{color:var(--ok);background:#e8f5ef;border-color:#b5d9c8}.modal-backdrop{z-index:40;background:#231c206b;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-card{border:1px solid var(--line);width:min(420px,100%);box-shadow:var(--shadow);background:#fff;border-radius:14px;padding:20px 18px 16px}.modal-card h3{font-family:var(--display);color:var(--ink);margin:0 0 8px;font-size:1.15rem;font-weight:700}.license-ok{background:#eef6f2;border:1px solid #c9e2d6;border-radius:10px;margin:12px 0;padding:12px;font-size:.9rem;font-weight:500;line-height:1.5}@media (width>=900px){.export-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;flex-wrap:wrap;justify-content:stretch;padding:0;position:static}.export-bar .btn{flex:28%}.app-shell{padding-bottom:40px}.side{max-height:calc(100dvh - 32px);padding-right:2px;position:sticky;top:16px;overflow:auto}}@media (prefers-reduced-motion:reduce){.btn,.chip{transition:none}}.banner-warn{border-radius:var(--radius-sm);color:#8a5a20;background:#fff4e8;border:1px solid #f0d0a8;margin:-6px 0 14px;padding:10px 14px;font-size:.88rem;line-height:1.45}.banner-warn code{font-size:.82em}.flow-steps{text-align:left;color:var(--muted);margin:10px 0 14px;padding-left:1.25em;font-size:.92rem;line-height:1.55}.flow-steps li+li{margin-top:4px}.flow-mini{margin:8px 0 0!important;font-size:.8rem!important}.toast{left:50%;bottom:calc(20px + var(--bar-h));z-index:1000;color:#fff;pointer-events:none;background:#2a2428eb;border-radius:999px;max-width:min(90vw,360px);padding:10px 16px;font-size:.9rem;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #0000002e}@media (width>=900px){.toast{bottom:28px}}body.editor-open{overflow:hidden}.editor-overlay{z-index:2000;background:var(--bg);color:var(--ink);flex-direction:column;display:flex;position:fixed;inset:0}.editor-top{background:var(--surface);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.editor-top-left{align-items:baseline;gap:12px;min-width:0;display:flex}.editor-top-left strong{font-family:var(--display);font-size:1.05rem}.editor-meta{color:var(--muted);font-size:.85rem}.editor-top-actions{flex-shrink:0;gap:8px;display:flex}.editor-body{flex:1;grid-template-columns:72px 1fr minmax(200px,260px);min-height:0;display:grid}.editor-tools{border-right:1px solid var(--line);background:var(--surface);flex-direction:column;gap:6px;padding:10px 8px;display:flex}.editor-tool{appearance:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-sm);cursor:pointer;background:#fff;padding:8px 4px;font-size:.78rem}.editor-tool.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}.editor-tool:disabled{opacity:.4;cursor:not-allowed}.editor-tools-sep{border:0;border-top:1px solid var(--line);margin:4px 0}.editor-hint{color:var(--muted);text-align:center;margin:8px 0 0;font-size:.68rem;line-height:1.35}.editor-viewport{background-color:#f3eeea;background-image:linear-gradient(45deg,#ece7e2 25%,#0000 25%),linear-gradient(-45deg,#ece7e2 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ece7e2 75%),linear-gradient(-45deg,#0000 75%,#ece7e2 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;position:relative;overflow:hidden}.editor-stage{will-change:transform;position:absolute;top:50%;left:50%;translate:-50% -50%}.editor-canvas{background:#fff;display:block;box-shadow:0 8px 28px #3c282d1f}.editor-side{border-left:1px solid var(--line);background:var(--surface);padding:12px;overflow:auto}.editor-side h3{margin:14px 0 8px;font-size:.85rem}.editor-color-now{border:1px solid var(--line);border-radius:var(--radius-sm);background:#faf7f5;align-items:center;gap:8px;padding:8px 10px;font-size:.9rem;display:flex}.editor-replace{border:1px solid var(--line);border-radius:var(--radius-sm);flex-direction:column;gap:8px;margin-top:10px;padding:10px;display:flex}.editor-replace-row{align-items:center;gap:8px;display:flex}.editor-replace-slot{border:1px dashed var(--line);border-radius:var(--radius-sm);flex:1;align-items:center;gap:6px;padding:6px 8px;font-size:.82rem;display:flex}.editor-swatch-list{flex-direction:column;gap:4px;max-height:280px;display:flex;overflow:auto}.editor-swatch-list.dense{grid-template-columns:1fr 1fr;gap:4px;max-height:360px;display:grid}.editor-swatch{appearance:none;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:#fff;align-items:center;gap:8px;width:100%;padding:6px 8px;font-size:.82rem;display:flex}.editor-swatch.is-on{border-color:var(--accent);background:var(--accent-soft)}.editor-swatch strong{font-variant-numeric:tabular-nums;margin-left:auto}.editor-all-colors{margin-top:12px}.editor-all-colors summary{cursor:pointer;color:var(--muted);font-size:.85rem}@media (width<=800px){.editor-body{grid-template-rows:1fr auto;grid-template-columns:56px 1fr}.editor-side{border-left:0;border-top:1px solid var(--line);grid-column:1/-1;max-height:34dvh}}