:root{--color-text: #2a2b2c;--color-subtitle: #7e848a;--color-primary: #DE2031;--color-stroke: #E9EAEC;--color-stroke-alt: #DFE0E2;--color-neutral: #FFFFFF;--color-background: #F7F9F9;--color-information: #0F77FF;--color-success: #6EC207;--color-warning: #F59E0B}@keyframes slide-down{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(-32px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-right{0%{opacity:0;transform:translate(32px)}to{opacity:1;transform:translate(0)}}body{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100dvh;gap:12px;background-color:var(--color-background);background-image:radial-gradient(#dadada 1px,transparent 1px);background-size:24px 24px;padding:20px}.config{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:20px;max-width:768px;width:100%;margin-left:auto;margin-right:auto;padding:20px;background-color:var(--color-neutral);border-radius:16px;border:1px solid var(--color-stroke)}.config-title{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:4px}.config-title .divider{border-right:1px solid var(--color-stroke);height:20px;margin:0 8px}.config-title h2{flex:1 0 0}.config-divider{border-bottom:1px dashed var(--color-stroke);margin-top:-4px}.config-body{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px}.config-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:flex-end;gap:24px;width:100%}.config-wrapper .SwapColor{border-radius:999px}.config-form{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:6px;flex:1 0 0}.config-indicator{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;max-width:480px;width:100%}.config-indicator .indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;max-width:800px;width:100%}.config-indicator .indicator .indicator-handle{height:12px;width:12px;position:absolute;box-shadow:0 0 0 3px #fff;transition:left 1s ease}.config-indicator .indicator .indicator-circle{height:24px;width:24px;border:4px solid var(--color-primary);border-radius:999px}.config-indicator .indicator .indicator-circle:first-child{border-color:var(--color-primary)}.config-indicator .indicator .indicator-circle:last-child{border-color:var(--color-success)}.config-indicator .indicator .indicator-divider{display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative;flex:1 0 0;height:4px;background:linear-gradient(to right,var(--color-primary),var(--color-warning),var(--color-success))}.config-info{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 20px;background-color:#f1f9e6;max-width:240px;width:100%;color:#5a9f06;border-radius:16px}.config-detail{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;width:100%;gap:12px}.config-detail-item{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:8px;flex:1 0 0;padding:12px 16px;background-color:var(--color-background);border-radius:10px;border:1px solid var(--color-stroke)}.config-detail-item .divider{border-right:1px solid var(--color-stroke);height:16px}.config-detail-item h2{display:flex;flex-direction:row;justify-content:center;align-items:center;height:20px;color:var(--color-neutral);padding-left:8px;padding-right:8px;border-radius:999px}.preview{max-width:768px;flex:1 0 0;width:100%;margin-left:auto;margin-right:auto;padding:20px;background-color:var(--color-neutral);border-radius:12px;border:1px solid var(--color-stroke)}.preview-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;height:100%;border-radius:8px}.preview-wrapper p{text-align:center;max-width:480px}