.CircularColorsDemo_wrapper__IVrO6{display:flex;flex-direction:column;align-items:center;gap:32px;margin-left:auto;margin-right:auto}.CircularColorsDemo_colorsWrapper__SrcwC{display:flex;gap:12px;padding:0;list-style-type:none}.CircularColorsDemo_color__8GSye{position:relative}.CircularColorsDemo_colorBox__PQCKq{position:relative;width:70px;height:70px;border:none;border-radius:4px;opacity:.5;transition:opacity .4s}.CircularColorsDemo_selectedColorBox__w7Dw6{opacity:1}.CircularColorsDemo_selectedColorOutline__qW3fF{position:absolute;z-index:9;inset:-8px;border:4px solid var(--color-text);border-radius:12px}.CircularColorsDemo_timeDisplay__hCkkv{display:flex;flex-direction:column;align-items:center}.CircularColorsDemo_timeDisplay__hCkkv dd{font-size:3rem;font-family:var(--font-family-mono)}.CircularColorsDemo_actions__skfhu{display:flex;gap:2px;margin-top:16px}.CircularColorsDemo_actions__skfhu button{--radius:5px;display:flex;justify-content:center;align-items:center;width:3rem;height:3rem;border:2px solid var(--color-gray-900);background:transparent;color:var(--color-gray-900);cursor:pointer;opacity:.6;transition:opacity .3s}.CircularColorsDemo_actions__skfhu button:first-child{border-radius:var(--radius) 0 0 var(--radius)}.CircularColorsDemo_actions__skfhu button:last-child{border-radius:0 var(--radius) var(--radius) 0}.CircularColorsDemo_actions__skfhu button:hover{opacity:1;transition:opacity 80ms}.CodeSnippet_wrapper__ytIBC{border-radius:0!important;margin:0 calc(var(--viewport-padding) * -1) 32px!important;border:1px solid var(--color-card-border)}.CodeSnippet_wrapper__ytIBC pre{padding:var(--viewport-padding)!important}.CodeSnippet_wrapper__ytIBC code{font-family:var(--font-family-mono)}.CodeSnippet_wrapper__ytIBC code>div{font-size:1.125rem;padding:0!important}@media (min-width:56rem){.CodeSnippet_wrapper__ytIBC{border-radius:8px!important}}.BlogList_wrapper__Qq63g{display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--content-width);padding:64px var(--viewport-padding);margin:0 auto}.BlogList_wrapper__Qq63g header{width:100%;display:flex;justify-content:space-between;align-items:baseline;margin-top:4rem;margin-bottom:1rem}.BlogList_wrapper__Qq63g h1{font-size:2.375rem;font-weight:var(--font-weight-bold)}.BlogList_wrapper__Qq63g span{font-size:1.125rem}.BlogList_mainHeading__Ih2R3{margin-top:1em;margin-bottom:1.5em}