@layer components{.palette{border-top:var(--layout-border);border-bottom:var(--layout-border);position:relative}.palette__inner{--padding:20px;width:min(calc(100% - var(--padding)), var(--layout-width));flex-direction:column;align-items:center;gap:20px;margin-inline:auto;padding:56px 16px;display:flex}@media (width>=520px) and (width<=920px){.palette__inner{--padding:50px}}@media (width>=800px){.palette__inner{padding:76px 26px}}.palette__title{width:fit-content;font-size:var(--h2);text-align:center;justify-content:center;align-items:baseline;gap:16px;font-weight:500;display:flex}.palette__tagline{text-align:center;text-wrap:balance;max-width:700px;margin-bottom:12px;font-weight:400}.palette__content{flex-direction:column;gap:36px;width:100%;display:flex}.palette__group{flex-direction:column;gap:14px;display:flex}.palette__group-label{font-size:var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-700);font-weight:600}.palette__swatches{gap:10px;display:grid}.palette__swatches--ui,.palette__swatches--syntax{grid-template-columns:repeat(4,1fr)}@media (width>=740px){.palette__swatches--ui{grid-template-columns:repeat(8,1fr)}.palette__swatches--syntax{grid-template-columns:repeat(7,1fr)}}.palette__swatch{background-color:var(--swatch-color);border:var(--layout-border);border-radius:var(--radius-300);aspect-ratio:3/4;color:#ffffffe6;transition:transform .2s var(--transition-easing), box-shadow .2s var(--transition-easing);flex-direction:column;justify-content:flex-end;gap:4px;padding:10px;display:flex;position:relative;overflow:hidden}.palette__swatch:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#0000 45%,#00000059 100%);position:absolute;inset:0}.palette__swatch--dark:after{background:linear-gradient(#0000 45%,#ffffff73 100%)}.palette__swatch:hover{box-shadow:var(--shadow-400);transform:translateY(-3px)}.palette__swatch--dark{color:#1e2737e6}.palette__swatches--syntax .palette__swatch{aspect-ratio:1}.palette__swatch-name,.palette__swatch-hex{z-index:1;font-family:var(--monospace-font);line-height:1.2;position:relative}.palette__swatch-name{opacity:.75;font-size:10px;font-weight:400}.palette__swatch-hex{letter-spacing:.02em;font-size:11px;font-weight:700}}