@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:row;justify-content:flex-start;align-items:stretch;height:100dvh;overflow:hidden}.config{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;max-width:288px;width:100%;border-right:1px solid var(--color-stroke);height:100%}.config-header{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:4px;height:52px;padding:0 20px}.config-header .divider{border-right:1px solid var(--color-stroke);height:20px;margin:0 8px}.config-header h2{flex:1 0 0}.config-list{padding:20px;flex:1 0 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:24px}.config-color,.config-preset{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:6px}.config-color-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.config-color-title button{display:flex;flex-direction:row;justify-content:center;align-items:center;background-color:transparent;border:none;gap:4px;color:var(--color-primary);cursor:pointer}.config-color-title button i{font-size:14px}.config-setting{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:12px}.config-setting-item{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:16px;padding:16px;background-color:var(--color-background);border-radius:10px;border:1px solid var(--color-stroke)}.config-setting-item .divider{border-bottom:1px dashed var(--color-stroke)}.config-setting-item .step-setting{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.config-setting-item .saturation-setting-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;margin-bottom:12px}.result{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%}.result-title{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;width:100%;height:52px;padding:0 20px;border-bottom:1px solid var(--color-stroke)}.result-title h2{flex:1 0 0}.result-body{padding:20px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:20px;flex:1 0 0}.result-color{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:8px}.result-color-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 2px}.result-color-title .title-text{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:4px}.result-color-title .title-text p{color:var(--color-subtitle)}.result-color-title .title-action{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:8px}.result-color-title .title-action button{padding:0;border:none;outline:none;background-color:transparent;font-size:12px;line-height:20px;font-weight:500;font-family:Inter,sans-serif;color:var(--color-subtitle);cursor:pointer}.result-color-title .title-action button.active,.result-color-title .title-action button:hover{color:var(--color-text)}.result-color-list{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;height:80px;transition:gap .4s ease}.result-color-list .color-item{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;height:100%;width:100%;cursor:pointer;position:relative}.result-color-list .color-item-preview{width:100%;height:100%;transition:border-radius .4s ease}.result-color-list .color-item-tooltip{position:absolute;padding:2px 4px;background-color:var(--color-text);color:var(--color-neutral);top:-24px}.result-preview{flex:100%;background-color:var(--color-background);background-image:radial-gradient(#dadada 1px,transparent 1px);background-size:16px 16px;border-radius:12px;padding:8px;border:1px solid var(--color-stroke)}.result-preview-nav{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.result-preview-nav .select{width:200px}.result-preview-component{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:100%}.popup-body{min-width:512px}.export-nav{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:12px}.export-nav button{padding:none;background-color:transparent;border:none;outline:none;cursor:pointer;color:var(--color-subtitle)}.export-nav button.active{color:var(--color-text)}.export-detail{position:relative;padding:12px;background-color:var(--color-background);border:1px solid var(--color-stroke);border-radius:8px;margin-top:8px;min-height:312px}.export-detail button{position:absolute;top:4px;right:4px}: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}.preview-button{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:4px}.preview-button button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:32px;font-size:14px;line-height:20px;font-family:Inter,sans-serif;font-weight:500;padding:0 12px;outline:none;border-radius:8px;border:1px solid var(--preview-button-border);color:var(--color-neutral);background-color:var(--preview-button-bg);box-shadow:inset 0 -2px 0 0 var(--preview-button-shadow);cursor:pointer}.preview-button button:hover{background-color:var(--preview-button-hover)}.preview-card{background-color:var(--preview-card-bg);width:400px;height:240px;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:16px}.preview-card p{color:var(--preview-card-text)}