@import "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap";:root{color:#15130f;background:#e9e5dc;font-family:Space Mono,monospace}*{box-sizing:border-box}body{margin:0}main{min-height:100vh;padding:24px clamp(20px,4vw,60px) 50px}header{text-transform:uppercase;letter-spacing:.1em;border-bottom:2px solid;justify-content:space-between;padding-bottom:20px;font-size:.72rem;display:flex}a{color:inherit}.mixer{grid-template-columns:1.15fr 1fr;align-items:center;gap:clamp(30px,6vw,100px);min-height:calc(100vh - 100px);display:grid}.swatch{aspect-ratio:1;background:var(--tone);border-radius:50%;transition:background .15s;position:relative;box-shadow:inset -30px -30px 80px #0002,16px 20px #15130f}.swatch span{white-space:nowrap;background:#e9e5dc;padding:7px 10px;font-size:.68rem;position:absolute;bottom:12%;left:50%;transform:translate(-50%)}.controls>p,.about section>p{text-transform:uppercase;letter-spacing:.12em;margin:0;font-size:.7rem}h1{letter-spacing:-.07em;text-transform:uppercase;margin:18px 0 48px;font:400 clamp(2.5rem,6vw,6.3rem)/.86 Archivo Black,sans-serif}label{text-transform:uppercase;border-top:1px solid;grid-template-columns:100px 1fr 44px;align-items:center;gap:14px;padding:18px 0;font-size:.7rem;display:grid}input{accent-color:#15130f;width:100%}output{text-align:right}.about{color:#e9e5dc;background:#15130f}.about section{max-width:1100px;padding-top:15vh}blockquote{border-left:8px solid #ff5f3d;max-width:680px;margin:60px 0 18px;padding-left:20px;font-size:clamp(1.3rem,3vw,2.2rem)}small{text-transform:uppercase;margin-left:28px}@media (width<=760px){.mixer{grid-template-columns:1fr;padding-top:50px}.swatch{width:min(78vw,430px);margin:auto}h1{margin-bottom:34px}}