@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#242a28;background:#f7f6f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.shell{max-width:1180px;margin:auto;padding:0 36px}button{font:inherit;cursor:pointer}header{display:flex;justify-content:space-between;align-items:center;padding:31px 0;border-bottom:1px solid #deded8}.brand{display:flex;align-items:center;gap:12px;font:800 24px Manrope,Arial,sans-serif;letter-spacing:-1.6px}.dot{color:#a99bc6}.mark{width:28px;height:28px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-13deg)}.mark i{border-radius:4px;background:#d7b48e}.mark i:nth-child(2){background:#aabf9a}.mark i:nth-child(3){background:#a2abc6}.mark i:nth-child(4){background:#d4a6a4}.badge,.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.1px;color:#888e88}.badge{letter-spacing:1.2px;background:#ebeae3;border-radius:30px;padding:9px 13px;color:#636c63}.hero{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:84px 0 96px;align-items:center}.hero-copy{align-self:center}.hero h1{font:700 clamp(38px,4.4vw,59px)/1.13 Manrope,Arial,sans-serif;letter-spacing:-3.3px;margin:20px 0 24px}.hero-copy p{max-width:390px;color:#68706a;font-size:16px;line-height:1.7;margin:0}.deck{max-width:475px;width:100%;justify-self:end}.swatch{height:365px;border-radius:19px;background:#8c9fbe;padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 22px 45px rgba(37,44,41,.11);color:#20262a;transition:background-color .3s,color .3s}.swatch-top{display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:1.3px}.swatch-bottom{display:flex;flex-direction:column;gap:3px}.color-name{font-size:15px;font-weight:600}.color-code{font:700 clamp(36px,5vw,57px) Manrope,Arial,sans-serif;letter-spacing:-2.8px}.details{display:flex;gap:16px;margin:21px 0}.details>div{width:50%;min-width:0}.detail-label{display:block;font-size:10px;font-weight:800;letter-spacing:1.4px;color:#929890;margin-bottom:7px}.value{background:transparent;border:0;padding:0;color:#313b34;font-size:14px;font-weight:700;white-space:nowrap}.value span{color:#9ba89b;padding-left:8px}.actions{display:flex;gap:10px}.draw{border:0;background:#252e28;color:#fff;border-radius:9px;min-height:55px;flex:1;display:flex;align-items:center;justify-content:center;gap:14px;font-weight:700;transition:transform .12s,background .15s}.draw:hover{background:#42564b;transform:translateY(-2px)}.dice{font-size:23px;font-weight:400}.arrow{margin-left:auto;margin-right:18px;font-size:17px}.save{border:1px solid #d8dbd2;background:#fff;border-radius:9px;min-width:107px;display:flex;align-items:center;justify-content:center;gap:7px;color:#424c43;font-weight:700}.save span:first-child{font-size:22px;font-weight:400;line-height:1}.save[aria-pressed=true]{background:#e8ede8;border-color:#9baea0}.toast{height:18px;font-size:12px;color:#587160;margin-top:7px}.collection{border-top:1px solid #deded8;padding:51px 0 80px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}.section-heading h2{font:700 25px Manrope,Arial,sans-serif;letter-spacing:-1.1px;margin:12px 0 0}.tabs{display:flex;gap:4px;border-radius:7px;padding:4px;background:#eaeae4}.tab{border:0;padding:10px 13px;background:transparent;border-radius:5px;color:#7c837a;font-size:12px;font-weight:700;white-space:nowrap}.tab span{font-size:10px;margin-left:3px}.tab.active{background:#fff;color:#323c34;box-shadow:0 1px 4px #00000010}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:27px}.tile{background:#fff;border:1px solid #e8e9e3;border-radius:10px;padding:7px;text-align:left;min-width:0}.tile:hover{box-shadow:0 8px 25px #22222214;transform:translateY(-2px)}.tile-color{height:105px;border-radius:6px;display:block}.tile-info{padding:10px 5px 5px;display:flex;justify-content:space-between;gap:4px}.tile-name{font-size:11px;font-weight:700;color:#333e36;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-hex{font-size:10px;color:#899188;font-weight:700}.empty{color:#858e83;font-size:14px;padding:28px 0}.rule-icon{height:36px;width:36px;display:grid;place-items:center;background:#e9ecdf;border-radius:9px;color:#788b71;font-size:23px;flex-shrink:0}footer{border-top:1px solid #deded8;padding:28px 0 38px;display:flex;gap:16px;align-items:flex-start}footer strong{font-size:12px}footer p{color:#848b83;font-size:12px;line-height:1.6;max-width:640px;margin:5px 0 0}.footer-note{color:#9da39a;font-size:11px;white-space:nowrap;margin-left:auto;margin-top:4px}@media(max-width:800px){.hero{gap:35px;padding:50px 0 62px}.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.shell{padding:0 20px}header{padding:20px 0}.brand{font-size:21px}.badge{font-size:8px;padding:8px}.hero{display:block;padding:38px 0 54px}.hero h1{font-size:38px;letter-spacing:-2px;margin:13px 0}.hero-copy p{font-size:14px}.deck{max-width:none;margin-top:33px}.swatch{height:300px}.color-code{font-size:43px}.section-heading{display:block}.section-heading h2{font-size:22px}.tabs{margin-top:23px;width:max-content}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile-color{height:94px}.collection{padding:37px 0 55px}footer{flex-wrap:wrap}.footer-note{margin:0 0 0 52px;width:100%}}@media(max-width:350px){.save{min-width:56px}.save-caption{display:none}.color-code{font-size:38px}}

/* Comfortable targets for touch and keyboard on small screens. */
.value{min-height:44px;display:inline-flex;align-items:center;text-align:left}.tab{min-height:44px}.tile:focus-visible,.tab:focus-visible,.draw:focus-visible,.save:focus-visible,.value:focus-visible{outline:3px solid #516c58;outline-offset:3px}@media(max-width:650px){.details{margin:10px 0 14px}.value{font-size:13px}.tile{min-height:150px}}@media(prefers-reduced-motion:reduce){.swatch,.draw{transition:none}}