@font-face{font-family:Figtree;src:url(/assets/Figtree-VariableFont_wght-CuCnmeMh.ttf) format("truetype")}:root{font-family:Figtree,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--primary-text);background-color:var(--primary-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--radius: max(.75vh, 8px);--game-width: min(86vw, 375px);--game-height: calc(var(--game-width) / 3 * 4 + var(--gap-size));--gap-sum: calc(var(--game-width) * .1);--bucket-height: calc( var(--game-height) - var(--chip-size) * 4 - var(--gap-size) * 4 );--gap-size: calc(var(--gap-sum) / 5);--chip-size: calc((var(--game-width) - var(--gap-sum)) / 6);--small-button-size: calc((var(--game-width) - var(--gap-sum)) / 8);--h1: min(2.5em, 9.5vw);--header-height: calc(var(--h1) * 1.1);--polaroid-height: calc( var(--bucket-height) + var(--gap-size) * 4 + var(--chip-size) * 3 + var(--header-height) );transition:all .5s;--height: calc( var(--game-height) + var(--header-height) + var(--small-button-size) + var(var(--gap-size)) * 3 )}:root[data-theme=dark]{--primary-background: #242424;--secondary-background: #383838;--primary-text: rgb(243, 244, 247);--secondary-text: #686868;--primary-button-background: #1a1a1a}:root[data-theme=light]{--primary-background: #ececec;--secondary-background: #cacaca;--primary-text: rgb(22, 22, 23);--secondary-text: #929292;--primary-button-background: #dadada}div{gap:var(--gap-size)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:var(--h1);line-height:1.1}.panel{transition:transform .5s;pointer-events:none;transform:translateY(-101%)}.panel.visible{pointer-events:auto;transform:translateY(0)}#help-panel{border-radius:var(--radius);gap:0;position:absolute;width:100%;height:100%;top:0;left:0;z-index:10000;display:flex}#help-panel #hue-swatch{display:flex;gap:0;flex-direction:column;width:30%;height:100%}#help-panel #hue-swatch>div{flex-grow:1;position:relative;border-bottom:6px solid white}#help-panel #hue-swatch>div p{position:absolute;bottom:4px;left:4px;text-transform:uppercase;margin:0;font-size:.8em}#help-panel #hue-swatch>div:first-child{border-top-left-radius:var(--radius)}#help-panel #hue-swatch>div:last-child{border-bottom-left-radius:var(--radius);border-bottom:none}#help-panel #help-content{background-color:#fff;width:70%;border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius);display:flex;flex-direction:column;align-items:left;text-align:left;padding:24px;color:#000;font-weight:500}#help-panel #help-content a{text-decoration:none;font-weight:900}button{border:1px solid transparent;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--primary-button-background);cursor:pointer;transition:background-color ease .5s;color:var(--primary-text)}button>*{pointer-events:none}button:focus,button:focus-visible{outline:2px solid var(--primary-text);outline-offset:-2px}button:disabled{color:var(--secondary-text)}button:disabled svg{color:var(--secondary-text)}#top{display:flex;justify-content:space-between;height:var(--small-button-size);overflow:hidden;position:relative}#top svg{width:20px;height:20px}#top .small{width:var(--small-button-size);height:var(--small-button-size);display:flex;justify-content:center;align-items:center;background-color:transparent;border-radius:var(--radius);position:relative;translate:0 -100%;transition:translate ease .5s}#top .small.extended{translate:0 -0}#top .small span.badge{position:absolute;top:0;right:0;padding:4px;border-radius:100%;font-size:10px;width:8px;height:8px;display:flex;align-items:center;justify-content:center;color:#fff}#top .mode{top:0;left:0;height:var(--small-button-size);display:flex;gap:var(--gap-size);background-color:transparent;padding:8px;text-transform:uppercase;border-radius:var(--radius);justify-content:center;justify-items:center;align-items:center;color:var(--primary-text);position:absolute;transition:translate .5s ease}#top .mode.game{translate:0 100%}#top .mode.home{translate:0 -100%}#top .mode.active{translate:0 0}#game{display:flex;flex-direction:column}div#main-wrapper{width:var(--game-width);height:var(--game-height);display:flex;flex-direction:column;position:relative}div#colors{height:var(--bucket-height);display:flex;flex-direction:row}div#colors #mixing-bucket{display:flex;flex-direction:column-reverse;align-content:end;gap:0;width:50%;border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);overflow:hidden}div#colors #mixing-bucket .color-slice{min-height:1%;width:100%}div#colors #matching-bucket{width:50%;border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}#modes{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}#modes button{padding:12px;border:none;font-size:12px;text-transform:uppercase}#mode-selection{display:flex;flex-direction:var(--gap-size);height:var(--bucket-height);width:100%;overflow:hidden}#mode-selection button:hover>div{animation:tilt-shaking .5s ease}#mode-selection button{width:50%;transition:translate ease .5s}#mode-selection button>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-size)}#mode-selection button:first-child{translate:-110% 0}#mode-selection button:last-child{translate:110% 0}#mode-selection button.extended:first-child,#mode-selection button.extended:last-child{translate:0 0}#mode-selection button#cotd-mode{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}#mode-selection button#freestyle-mode{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}#mode-selection button svg{width:42px;height:42px}#header{display:flex;justify-content:space-between;margin-bottom:var(--gap-size)}.scroll-label{display:flex;gap:0;height:var(--header-height);width:fit-content}.scroll-label .scroll{text-transform:uppercase;position:relative;overflow:hidden;width:100%}.scroll-label .scroll h1{text-align:left;translate:0 -100%}.scroll-label .scroll h1.transitioning{transition:translate ease .5s;translate:0 0}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.chip{width:var(--chip-size);height:var(--chip-size);border-radius:var(--radius);aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;padding:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.chip>div{height:80%;aspect-ratio:1/1;border-radius:100%;border:2px solid white;display:flex;align-items:center;justify-content:center;box-sizing:border-box;opacity:0;transition:.25s ease-in-out}.chip>div.flash-in{opacity:1}.chip>h3{opacity:1;transition:opacity ease-in-out .25s;position:absolute;padding:4px;line-height:1;font-weight:500}.chip>h3.flash-out{opacity:0}.chip.expanded{width:calc(var(--chip-size) * 2 + var(--gap-size));aspect-ratio:none}.chip svg{pointer-events:none}.chip.activeHistory{border:2px solid white}.color-chip-wrapper{display:flex;flex-direction:row;gap:var(--gap-size);width:100%}#settings{background-color:var(--secondary-background);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:4px;position:relative;gap:4px;transition:all ease .5s;translate:110% 0}#settings.opened{translate:0 0}#settings .small{width:calc(var(--small-button-size) - 10px);height:calc(var(--small-button-size) - 10px);border-radius:calc(var(--radius) - 2px)}#settings svg{width:16px;height:16px}#settings:before{content:"";position:absolute;--switch-size: 8px;right:calc(-1 * var(--switch-size));top:calc(50% - var(--switch-size));border-top:var(--switch-size) solid transparent;border-bottom:var(--switch-size) solid transparent;border-left:var(--switch-size) solid var(--secondary-background);transition:border-color .5s ease}#settings .enabled{background-color:var(--primary-background)}#settings .switch{position:relative;display:inline-block;width:60px;height:34px}#settings .switch input{opacity:0;width:0;height:0}#settings .slider-track{position:absolute;cursor:pointer;pointer-events:none;inset:0;background-color:var(--primary-background);-webkit-transition:.4s;transition:.4s;border-radius:calc(var(--radius) - 2px)}#settings .slider-track>.slider{border-radius:calc(var(--radius) - 4px)}#settings .slider{pointer-events:none;position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:var(--secondary-background);-webkit-transition:.4s;transition:.4s;display:flex;align-items:center;justify-content:center}#settings input:checked+.slider-track>.slider{background-color:var(--secondary-background);-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}#share{position:absolute;width:100%;opacity:0;transition:.5s;height:var(--game-width);display:flex}#share p{padding:8px 24px;box-sizing:border-box;width:fit-content;margin:auto;border-radius:16px;background:#fff;font-weight:500;font-size:14px;color:#000}#share.flash{opacity:1}button#mix{border-radius:var(--radius);overflow:hidden;height:var(--chip-size);width:calc(var(--chip-size) * 4 + var(--gap-size) * 3);align-items:center;justify-content:center;display:flex;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}button#mix:disabled svg{fill:var(--primary-text)}button#mix svg{width:100%;height:40%}button#mix>*{pointer-events:none}button#mix h2{margin:0;font-size:2em}#retry button{border:none;border-radius:var(--radius);flex-grow:3;width:100%;text-transform:lowercase;align-items:center;justify-content:center;align-content:center;display:flex}#retry button:first-child,#retry button:last-child{flex-grow:1}#retry button.retry{background:linear-gradient(45deg,#e32636 0% 16.6%,#ff732d 16.6% 33.33%,#f8b600 33.33% 50%,#54b108 50% 66.67%,#4984cd 66.67% 83.33%,#734ab5 83.33% 100%)}div#color-controls-wrapper{display:flex;flex-direction:column;gap:var(--gap-size)}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;padding:1rem;box-sizing:border-box;text-align:center;margin:0 auto}h1,h2,h3,h4,h5,h6{margin:0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.card{padding:2em}.read-the-docs{color:#888}