.add-color-page{--navy: #12213e;--color-accent: #ff674c;--color-muted: #536681;--color-surface: #f5f7ff;--color-gutter: max(24px, calc((100vw - 1120px)/2) );background:#fffdf8;color:var(--navy);font-family:Manrope,Arial,sans-serif}.add-color-page :is(h1,h2,h3){text-wrap:balance}.add-color-page :is(a,button,input):focus-visible{outline:3px solid #466c95;outline-offset:4px}.add-color-hero{padding:52px 24px 48px;background:var(--color-surface)}.add-color-hero__copy{max-width:940px;margin:auto;text-align:center}.add-color-hero h1{max-width:1000px;margin:0 auto 26px;color:#454545;font:800 clamp(42px,7.2vw,80px)/1.14 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em}.add-color-hero h1>span{display:block}.add-color-hero__copy>p{max-width:770px;margin:0 auto 28px;color:var(--color-muted);font-size:15px;line-height:1.75}.add-color-workboard{max-width:960px;padding:16px;border:1px solid #dce2f0;border-radius:18px;box-shadow:0 14px 40px #12213e09}.add-color-page .add-color-workboard .workspace{scroll-margin-top:90px;border:0;border-radius:12px;box-shadow:none}.add-color-page .add-color-workboard .workspace.empty{min-height:245px;margin:0;padding:28px 20px;outline-color:#acb8cf;background:#fff}.add-color-page .add-color-workboard .workspace h2{max-width:650px;font:500 clamp(25px,2.5vw,32px)/1.12 "Bricolage Grotesque",sans-serif;letter-spacing:-.035em}.add-color-page .add-color-workboard .workspace-kicker{color:var(--color-muted)}.add-color-page .add-color-workboard :is(.workspace-note,.workspace-privacy-link){color:var(--color-muted);line-height:1.6}.add-color-page .add-color-workboard .workspace-privacy-link{margin-top:10px;font-size:11px;text-decoration:underline;text-underline-offset:3px}.add-color-page .add-color-workboard :is(.upload-button,.remove-button,.download-button){border-radius:999px;padding:14px 24px;color:#fff;background:var(--navy);box-shadow:none;font-weight:600}.add-color-page .add-color-workboard :is(.upload-button,.remove-button,.download-button):hover:not(:disabled){background:#24476d}.add-color-page .add-color-workboard .workspace.active{padding:18px;background:#fff}.add-color-page .add-color-workboard .image-stage{height:320px}.add-color-page .add-color-workboard .image-pane.original{background:#eef1f6}.add-color-page .add-color-workboard .workspace-background{border-color:#dce2f0}.add-color-page .add-color-workboard .background-choice-group button.is-active{background:#f0f3ff;border-color:#466c95;color:var(--navy)}.add-color-page .add-color-workboard .custom-color-popover{top:auto;bottom:calc(100% + 10px)}.add-color-page .tool-section{--tool-section-gutter: var(--color-gutter)}.add-color-page .image-text-comparison{padding-block:82px 24px;gap:64px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:transparent}.add-color-page .image-text-comparison h2{font:400 clamp(32px,3.4vw,46px)/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em}.add-color-page .image-text-comparison p{color:var(--color-muted);font:400 15px/1.75 Manrope,sans-serif}.add-color-page .image-text-comparison [class$=__visual]{width:100%;max-width:510px;justify-self:center;border-radius:12px;box-shadow:none}.add-color-page .image-text-comparison .comparison-image{object-fit:contain}.add-color-page .image-text-comparison .comparison-original{background-color:#fff}.add-color-page .image-text-comparison .comparison-cutout{background:var(--comparison-result-background)}.add-color-page .image-text-comparison .comparison-label{font-size:10px}.add-color-caption{max-width:1120px;margin:0 auto;padding:0 0 48px;color:var(--color-muted);font:400 11px/1.6 Manrope,sans-serif;text-align:end}.add-color-page :is(#color-feature-2,#color-module-6){background:var(--color-surface)}.add-color-page .image-text-comparison [class$=__copy]>a,.add-color-workflow__action a{display:inline-flex;align-items:center;gap:12px;max-width:100%;min-height:48px;margin-top:26px;padding:14px 20px;border-radius:9px;background:var(--navy);color:#fff;font:600 14px/1.5 Manrope,sans-serif;text-decoration:none;text-align:start}.add-color-page .image-text-comparison [class$=__copy]>a:hover,.add-color-workflow__action a:hover{background:#24476d;color:#fff}.add-color-demo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 22px;max-width:1120px;margin:0 auto 20px;padding:0 24px;color:var(--color-muted);font-size:12px}.add-color-demo__swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.add-color-demo button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 10px;border:1px solid #d5dbea;border-radius:999px;color:var(--navy);background:#fff;font:inherit;cursor:pointer}.add-color-demo button[aria-pressed=true]{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}.add-color-demo button i{width:19px;height:19px;border:1px solid #12213e22;border-radius:50%}.add-color-demo output{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px}.add-color-workflow{padding-bottom:60px;background:#f2f6f4}.add-color-page .add-color-workflow .seo-workflow{padding-bottom:0;background:transparent}.add-color-page .add-color-workflow :is(h2,h3){font-weight:400}.add-color-page .workflow-explanation{max-width:740px;margin:16px auto 0;color:var(--color-muted);font:400 14px/1.65 Manrope,sans-serif}.add-color-workflow__action{padding-inline:var(--color-gutter);text-align:center}.add-color-page .why-section{--why-background: #fffdf8}.add-color-page .why-section__image{border-radius:10px;box-shadow:none}.add-color-page .audience-tabs{background:transparent;padding-bottom:24px}.add-color-page .audience-tabs__tabs{background:#e8edf7}.add-color-page .audience-tabs__tabs .is-active{background:var(--navy);color:#fff}.add-color-page .audience-tabs__tabs .is-active:hover{color:#fff}.add-color-page .audience-tabs__visual{min-height:0;height:330px;box-shadow:none}.add-color-page .audience-tabs__visual img{min-height:0;object-fit:contain;object-position:center;background:#fff}.add-color-page .audience-tabs__visual>img:first-child{background:#090d13}.add-color-page #color-audience-sellers .audience-tabs__visual--single{grid-template-columns:1fr;height:auto;aspect-ratio:4 / 3}.add-color-page #color-audience-sellers .audience-tabs__visual--single>img{min-height:0;object-fit:contain;background:transparent}.add-color-page #color-audience-marketers .audience-tabs__visual--single{grid-template-columns:1fr;height:auto;aspect-ratio:4 / 3}.add-color-page #color-audience-marketers .audience-tabs__visual--single>img{min-height:0;object-fit:contain;background:transparent}.add-color-page #color-audience-designers .audience-tabs__visual--single{grid-template-columns:1fr;height:auto;aspect-ratio:4 / 3}.add-color-page #color-audience-designers .audience-tabs__visual--single>img{min-height:0;object-fit:contain;background:transparent}.add-color-page #color-audience-personal .audience-tabs__visual--single{grid-template-columns:1fr;height:auto;aspect-ratio:4 / 3}.add-color-page #color-audience-personal .audience-tabs__visual--single>img{min-height:0;object-fit:contain;background:transparent}.add-color-page .audience-tabs__copy>a{background:var(--navy);box-shadow:none;border-radius:9px}.add-color-page .audience-tabs__copy>a:hover{background:#24476d}.add-color-page .preview-close{background:var(--navy)}.add-color-page .preview-close>div>a{color:var(--navy);border-radius:9px}@media(min-width:901px){.add-color-page .preview-close{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;padding-inline:var(--color-gutter)}.add-color-page .preview-close>div{max-width:none}}@media(max-width:1150px){.add-color-page{--color-gutter: 40px}.add-color-page .image-text-comparison{gap:36px}.add-color-caption{padding-inline:var(--color-gutter)}}@media(max-width:860px){.add-color-page .image-text-comparison{grid-template-columns:1fr}}@media(max-width:760px){.add-color-page{--color-gutter: 24px}.add-color-hero{padding:32px 16px}.add-color-hero__copy>p{font-size:14px}.add-color-page .image-text-comparison{padding-block:56px 24px}.add-color-page .add-color-workboard .image-stage{height:240px;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:6px}.add-color-page .add-color-workboard .workspace-actions{flex-wrap:wrap}.add-color-page .add-color-workboard .file-meta{flex-basis:100%}}@media(max-width:540px){.add-color-hero h1{font-size:clamp(32px,8.8vw,38px)}.add-color-workboard{padding:10px;border-radius:14px}.add-color-page .add-color-workboard .workspace.empty{min-height:220px;padding:22px 14px}.add-color-page .add-color-workboard .workspace.active{padding:12px}.add-color-page .audience-tabs__tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-block:30px 34px;border-radius:14px;overflow:visible}.add-color-page .audience-tabs__tabs button{min-width:0;min-height:48px;padding:8px;white-space:normal;line-height:1.4}.add-color-page .audience-tabs__visual{height:250px}.add-color-demo{gap:12px}}@media(prefers-reduced-motion:reduce){html:has(.add-color-page){scroll-behavior:auto}.add-color-page *,.add-color-page *:before,.add-color-page *:after{transition:none!important;animation:none!important}}html[dir=rtl] .add-color-page :is(h1,h2,h3){line-height:1.3;letter-spacing:normal}html[dir=rtl] .add-color-page :is(.workspace-kicker,.preview-label,.comparison-label){letter-spacing:normal}html[dir=rtl] .add-color-page :is(.comparison-input,.custom-color-plane,.custom-color-hue input,.custom-color-rgb,.custom-color-popover output,.add-color-demo output,.file-meta strong){direction:ltr}html[dir=rtl] .add-color-page :is(.custom-color-popover output,.add-color-demo output,.file-meta strong){unicode-bidi:isolate}html[dir=rtl] .add-color-page .custom-color-popover{right:auto;left:0}html[dir=rtl] .add-color-page :is(.add-color-workflow__action a,.image-text-comparison [class$=__copy]>a)>span{transform:scaleX(-1)}html[dir=rtl] .add-color-page .arrow-cut:after{right:auto;left:0;transform:scaleX(-1)}@media(min-width:761px){html[dir=rtl] .add-color-page .workflow-card:not(:last-child):after{content:"←";right:auto;left:-33px}}html:is([lang=th],[lang=hi-IN]) .add-color-page :is(h1,h2,h3){line-height:1.4;letter-spacing:normal}html:is([lang=th],[lang=hi-IN]) .add-color-page .add-color-workboard .workspace h2{line-height:1.4;letter-spacing:normal}html:is([lang=th],[lang=hi-IN]) .add-color-page :is(.workspace-kicker,.preview-label,.comparison-label){letter-spacing:normal}html[lang=ko] .add-color-page :is(h1,h2,h3,p,a,button,summary,li){word-break:keep-all;overflow-wrap:break-word}