@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@400;500&family=Space+Grotesk:wght@400;500&display=swap";*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#141414;font-family:Space Grotesk,Arial,sans-serif}button,a{font:inherit;color:inherit}button{cursor:pointer}a{text-decoration:none}main{width:min(100% - 140px,1400px);margin:auto}header{height:91px;border-bottom:1px solid #ccc;display:flex;align-items:center;justify-content:space-between}.logo{font-size:28px;letter-spacing:-.06em}nav{display:flex;gap:48px;font-size:16px}section{max-width:1025px;margin:48px auto 0}h1{margin:0;font:500 clamp(55px,6vw,83px)/1.04 "Playfair Display",serif;letter-spacing:-.065em}.lede{margin:20px 0 39px;color:#505050;font-size:17px}.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.swatches button{height:367px;border:0;padding:0 24px 25px;display:flex;flex-direction:column;justify-content:end;align-items:start;text-align:left;transition:transform .25s ease}.swatches button:hover{transform:translateY(-7px)}.swatches strong{font:500 25px DM Mono,monospace;letter-spacing:-.07em}.swatches i{margin-top:14px;font-style:normal;font-size:22px}.shuffle{display:flex;align-items:center;gap:16px;margin:28px auto 18px;border:0;background:transparent;font-size:18px}.shuffle span{width:58px;height:58px;border-radius:50%;background:#3964bb;color:#fff;display:grid;place-items:center;font-size:27px}.tools{min-height:113px;border-top:1px solid #ccc;display:grid;grid-template-columns:1.08fr .92fr;align-items:center}.moods{display:flex;gap:28px;align-items:center}.moods small{letter-spacing:.22em;font-size:11px}.moods button{border:0;background:transparent;padding:14px 0;font-size:15px}.moods button.active{color:#3964bb;border-bottom:2px solid #3964bb}.tools p{border-left:1px solid #ccc;padding-left:38px;color:#555;font-size:14px;line-height:1.5}footer{border-top:1px solid #ccc;margin-top:41px;padding:27px 0 37px;display:flex;justify-content:space-between;color:#555;font-size:13px}@media(max-width:720px){main{width:calc(100% - 32px)}header{height:70px}.logo{font-size:22px}nav{gap:18px;font-size:13px}section{margin-top:36px}.lede{font-size:14px}.swatches{gap:5px}.swatches button{height:250px;padding:0 8px 13px}.swatches strong{font-size:12px}.swatches i{font-size:14px;margin-top:7px}.tools{grid-template-columns:1fr}.moods{gap:14px;flex-wrap:wrap;padding:18px 0}.moods small{width:100%}.tools p{border:0;border-top:1px solid #ddd;padding:18px 0;margin:0}footer{margin-top:18px}}