*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#252625;background:#ededed;font-synthesis:none;--base:#4fa634;--border:#dcdcdc}body{margin:0}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #4b823b;outline-offset:5px}button{border:0;background:none}input,select{border:0;outline-offset:3px}select{cursor:pointer;background:transparent}.app{max-width:1440px;margin:auto;padding:0 40px}.header{height:116px;display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.brand{display:flex;align-items:center;color:inherit;text-decoration:none;white-space:nowrap}.brand-mark{width:23px;height:23px;background:conic-gradient(#ba38e1,#557bff,#42d2ca,#fbca48,#fa7873,#ba38e1);clip-path:polygon(50% 0,75% 12%,88% 25%,100% 50%,88% 75%,75% 88%,50% 100%,25% 88%,12% 75%,0 50%,12% 25%,25% 12%);position:relative;margin-right:6px}.brand-mark:after{content:"";position:absolute;inset:6px;background:#ededed;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.wordmark{font-size:26px;font-weight:650;letter-spacing:-1.4px}.brand-description{font-size:18px;margin-left:6px;letter-spacing:-.6px}.header nav{display:flex;gap:22px}.header nav button{font-size:14px;padding:10px 0}.header nav button:hover{text-decoration:underline;text-underline-offset:5px}.share-icon{display:none}.controls{border:1px solid #d9d9d9;border-radius:22px;box-shadow:inset 1px 1px 3px #ffffff55,0 1px 2px #00000003;display:grid;grid-template-columns:1fr 1.1fr 1fr;padding:36px 0 34px}.control-column{padding:0 38px;min-width:0;position:relative}.control-column+.control-column{border-left:1px solid #dadada}.color-top{display:flex;align-items:center;justify-content:space-between;gap:6px;height:37px;margin-bottom:18px}.color-entry{display:flex;gap:12px;align-items:center;min-width:0}.color-dot{background:var(--base);width:30px;height:30px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 1px 2px #ffffff60;overflow:hidden;cursor:pointer;position:relative}.color-dot input{position:absolute;inset:-10px;width:50px;height:50px;opacity:0;cursor:pointer}#hex{font-size:23px;background:none;width:128px;padding:0;letter-spacing:-.5px}#hex[aria-invalid=true]{color:#b13434}#channel-mode{font-size:14px;width:59px}.channel-inputs{display:flex;background:#f8f8f8;border-radius:7px;box-shadow:inset 1px 2px 4px #d6d6d6,0 1px 1px #ffffffc0;height:36px;margin-bottom:14px}.channel-inputs label{display:flex;align-items:center;width:33.33%;position:relative;padding:0 9px;gap:8px}.channel-inputs label+label:before{content:"";width:1px;height:16px;position:absolute;left:0;background:#e6e6e6}.channel-inputs span{font-size:14px;color:#919391}.channel-inputs input{width:100%;min-width:0;background:none;padding:0;font-size:14px;appearance:textfield}.channel-inputs input::-webkit-inner-spin-button{appearance:none}.sliders{display:grid;gap:20px;padding-top:3px}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:9px;border-radius:8px;margin:0;cursor:pointer;box-shadow:inset 0 1px 2px #00000013;background:#dcdcdc}input[type=range]::-webkit-slider-thumb{appearance:none;width:39px;height:22px;border-radius:15px;background:linear-gradient(128deg,#eeeeee 5%,#ffffff 23%,#cfcfcf 45%,#e1e1e1 58%,#fafafa 83%,#dddddd);border:1px solid #ffffff77;box-shadow:2px 4px 5px #00000028,-2px -2px 4px #ffffffcc}input[type=range]::-moz-range-thumb{width:37px;height:20px;border-radius:15px;background:linear-gradient(125deg,#f5f5f5,#d3d3d3,#fafafa);border:1px solid #ffffff77;box-shadow:2px 4px 5px #00000028}.eyebrow{display:block;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:#838583;line-height:16px}.large-select{font-size:28px;letter-spacing:-.7px;margin:10px 0 0 -3px;max-width:100%;padding:0 24px 0 0}.contrast-header{margin-top:37px}#contrast-value{display:block;font-size:31px;line-height:1.15;margin-top:4px;letter-spacing:-1px;font-variant-numeric:tabular-nums}#contrast{margin-top:15px;background:linear-gradient(to right,#111 34.5%,#dcdcdc 34.5%)}.count-label{margin-top:39px}.stepper{display:flex;align-items:center;gap:25px;margin-top:12px}.stepper button{width:51px;height:51px;border-radius:50%;font-size:30px;display:grid;place-items:center;line-height:1;background:linear-gradient(140deg,#fafafa,#e4e4e4 75%);box-shadow:3px 5px 7px #00000023,-4px -4px 9px #ffffffa0;transition:transform .15s,box-shadow .15s}.stepper button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 2px 3px 5px #00000018}#count{font-size:29px;min-width:29px;text-align:center;letter-spacing:-1px}.input-error{position:absolute;bottom:-24px;left:38px;font-size:12px;color:#a72d2d}.palette-section{margin-top:27px}.palette-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}#palette-name{background:none;font-size:21px;max-width:50%;width:250px;padding:2px 0}#palette-name:hover{box-shadow:0 1px #bbb}.export-actions{display:flex;gap:13px}.small-button{display:flex;align-items:center;gap:4px;background:linear-gradient(#fafbf9,#e3e7df);border-radius:6px;padding:4px 7px;font-size:12px;box-shadow:1px 3px 5px #00000023,-1px -1px 2px #ffffffb0;color:#4a5e41}.small-button svg,.copy-button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}.green-button{color:#edfbe7;background:linear-gradient(#41752e,#2e5c23)}.small-button:active{transform:translateY(1px)}.palette{display:grid;grid-template-columns:repeat(var(--count,11),minmax(0,1fr));gap:11px}.swatch{border-radius:12px;height:112px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;padding:12px 10px;position:relative;box-shadow:inset 1px 1px 2px #ffffff66,1px 4px 6px #0000001c;transition:transform .15s,box-shadow .15s;background:var(--swatch);color:var(--ink);min-width:0}.swatch:hover{transform:translateY(-5px);box-shadow:inset 1px 1px 2px #ffffff66,1px 9px 14px #0000001c}.shade-label{font-size:12px;opacity:.75}.shade-hex{font-size:12px;font-weight:600;white-space:nowrap;letter-spacing:.15px}.reflection{margin-top:11px;mask-image:linear-gradient(#00000018,transparent 85%);-webkit-mask-image:linear-gradient(#00000018,transparent 85%);pointer-events:none;user-select:none;height:107px;overflow:hidden}.reflection .swatch{transform:scaleY(-1)}.code-section{margin-top:60px}.code-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px;gap:15px}.tabs,.formats{display:flex;gap:17px;align-items:center}.tabs button{padding:0 0 7px;font-size:16px;position:relative}.tabs button[aria-selected=true]:after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid #333}.formats{gap:17px}.formats button{font-size:12px;padding:0 0 5px;color:#515451}.formats button[aria-pressed=true]{text-decoration:underline;text-underline-offset:5px;color:#151715}.code-box{position:relative;border:1px solid #dedede;border-radius:18px;background:linear-gradient(145deg,#f5f5f5,#eaeaea);box-shadow:inset 0 1px 3px #00000006,0 1px 1px #ffffffcc;min-height:325px;overflow:hidden}.copy-button{position:absolute;right:10px;top:10px;background:#333633;color:#fff;border-radius:6px;display:flex;align-items:center;gap:4px;font-size:12px;padding:4px 6px;z-index:1}.copy-button:hover{background:#171917}pre{margin:0;padding:23px 25px 26px;overflow-x:auto;font-size:14px;line-height:1.55;tab-size:2}code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.code-comment{color:#929792;font-style:italic}.code-key{color:#5b65af}.code-punct{color:#935488}footer{display:flex;justify-content:space-between;color:#8b908b;font-size:12px;padding:24px 0 28px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);opacity:0;background:#262c25;color:white;border-radius:10px;padding:12px 20px;font-size:14px;box-shadow:0 6px 25px #0002;transition:opacity .2s,transform .2s;pointer-events:none;z-index:5;max-width:90vw;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{width:min(460px,calc(100% - 40px));border:1px solid #ddd;border-radius:20px;padding:28px;background:#f4f4f4;box-shadow:0 20px 100px #0003}dialog::backdrop{background:#191f1940;backdrop-filter:blur(4px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-heading h2{font-size:23px;letter-spacing:-.5px;margin:0}.dialog-heading button{font-size:28px}.dialog-content,p,li{line-height:1.6;font-size:16px}#dialog-content button{margin-top:5px;padding:12px 18px;background:#386b28;color:white;border-radius:9px}#dialog-content ol{padding-left:22px}
@media(min-width:1400px){.header{margin-bottom:60px}.controls{padding-top:39px;padding-bottom:39px}.swatch{height:125px}.code-section{margin-top:73px}}
@media(max-width:1100px){.app{padding:0 28px}.header{height:102px;margin-bottom:28px}.control-column{padding:0 27px}.controls{padding:28px 0}.large-select{font-size:24px}#hex{font-size:21px;width:110px}.color-entry{gap:9px}.color-dot{width:27px;height:27px}.channel-inputs label{padding:0 7px;gap:5px}.palette{gap:9px}.swatch{padding:10px 8px;height:100px}.shade-hex{font-size:10px}.stepper{gap:23px}.stepper button{width:46px;height:46px}.contrast-header{margin-top:34px}.count-label{margin-top:37px}.code-section{margin-top:45px}}
@media(max-width:850px){.app{padding:0 24px}.header{height:98px;margin-bottom:20px}.brand-description{font-size:16px}.wordmark{font-size:24px}.header nav{gap:16px}.controls{grid-template-columns:1.05fr 1fr 1fr}.control-column{padding:0 20px}.large-select{font-size:21px}.eyebrow{font-size:11px;letter-spacing:1.5px}.color-entry{gap:7px}#hex{width:97px;font-size:19px}.color-dot{width:24px;height:24px}#channel-mode{width:52px;font-size:12px}.channel-inputs label{padding:0 6px;gap:4px}.channel-inputs input,.channel-inputs span{font-size:12px}.stepper{gap:17px}.palette{gap:7px}.swatch{border-radius:9px;padding:10px 6px;height:90px}.shade-label{font-size:11px}.shade-hex{font-size:9px;letter-spacing:0}.reflection{height:85px}.code-section{margin-top:38px}}
@media(max-width:650px){.app{padding:0 20px}.header{height:90px;margin-bottom:18px;gap:10px}.brand-description{font-size:14px;letter-spacing:-.4px}.wordmark{font-size:22px}.brand-mark{height:20px;width:20px}.header nav{gap:14px}.header nav button{font-size:13px}.header nav #figma-info{display:none}.controls{grid-template-columns:1fr 1fr;padding:0;border-radius:19px}.control-column{padding:25px 23px}.color-controls{grid-column:1/-1;padding:24px 25px 28px}.color-top{margin-bottom:17px}.color-dot{width:31px;height:31px}.color-entry{gap:12px}#hex{font-size:24px;width:150px}#channel-mode{font-size:14px;width:60px}.channel-inputs{height:37px;margin-bottom:19px}.channel-inputs label{padding:0 15px;gap:14px}.channel-inputs input,.channel-inputs span{font-size:14px}.sliders{gap:22px}.control-column+.control-column{border-left:0;border-top:1px solid #dadada}.naming-controls{border-left:1px solid #dadada!important}.large-select{font-size:21px;letter-spacing:-.6px;margin-top:10px}.eyebrow{font-size:10px;letter-spacing:1.5px}.contrast-header{margin-top:25px}#contrast-value{font-size:29px}.count-label{margin-top:25px}.stepper{gap:15px;margin-top:10px}.stepper button{width:42px;height:42px;font-size:27px}#count{font-size:26px;min-width:25px}#contrast{margin-top:19px}.input-error{bottom:6px;left:25px}.palette-section{margin-top:24px}.palette-heading{margin-bottom:16px}#palette-name{font-size:21px}.export-actions{gap:9px}.small-button{font-size:11px}.palette{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.swatch{height:99px;border-radius:11px;padding:11px 9px}.shade-label{font-size:12px}.shade-hex{font-size:11px}.reflection{display:none}.code-section{margin-top:36px}.code-toolbar{gap:10px;margin-bottom:16px}.tabs{gap:13px}.tabs button{font-size:14px}.formats{gap:9px}.formats button{font-size:10px}.code-box{border-radius:15px;min-height:325px}pre{font-size:12px;padding:39px 17px 23px;line-height:1.65}footer{font-size:10px;padding-top:20px}.header nav #about{display:none}}
@media(max-width:370px){.app{padding:0 14px}.control-column{padding-left:17px;padding-right:17px}.large-select{font-size:19px}.stepper{gap:12px}.palette{grid-template-columns:repeat(3,minmax(0,1fr))}.formats{gap:6px}.tabs{gap:10px}.brand-description{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

main{padding-bottom:40px}

/* The longer SwatchSpring wordmark needs room beside navigation. */
.header{gap:20px}.header .brand{min-width:0}.header .wordmark{letter-spacing:-1px}
@media(max-width:900px){.header .brand-description{display:none}}
@media(max-width:480px){.header{gap:10px;flex-wrap:wrap;height:auto;padding:24px 0;margin-bottom:24px}.header .wordmark{font-size:24px}.header nav{gap:16px}.header nav button{font-size:12px}}