html,body{margin:0}body{height:100dvh}#app{padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}@media (min-aspect-ratio: 4/3){#app{flex-direction:row;gap:50px}}.container{margin:10px;text-align:center}input[type=range]{touch-action:none}#color-wheel{display:block;margin:auto;cursor:crosshair;touch-action:none;clip-path:circle(50% at center)}#color-display{text-align:center;font-size:1.2rem;margin-top:10px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:1em;color:#ffffffde;background-color:#242424}