*{box-sizing:border-box;outline:#0000;margin:0;padding:0}button{font:inherit}@keyframes impatient{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@keyframes impatient-flipped{0%,to{transform:scaleX(-1)rotate(0)}25%{transform:scaleX(-1)rotate(-8deg)}75%{transform:scaleX(-1)rotate(8deg)}}@keyframes pulse{0%,to{transform:translate(-50%,40%)scale(1)}50%{transform:translate(-50%,40%)scale(1.3)}}html,body{height:100dvh}body{flex-direction:column;font-family:sans-serif;font-size:1.2rem;display:flex;overflow:hidden}:is(dialog[open],dialog:open){border:1px solid #000;border-radius:10px;flex-direction:column;align-items:center;width:min(90vw,500px);font-size:1.1rem;display:flex;top:50%;left:50%;transform:translate(-50%,-50%)}:is(dialog[open],dialog:open) .title{text-align:center;padding:1rem 1rem 0;font-size:1.5em;font-weight:700}:is(dialog[open],dialog:open) .content{margin-bottom:1.25rem;padding:0 1rem}:is(dialog[open],dialog:open) p+p{margin-top:.75rem}:is(dialog[open],dialog:open) button{text-align:center;text-transform:uppercase;background-color:#f8f8ff;border:none;border-top:1px solid #000;width:100%;padding:1rem;font-size:.75em;font-weight:700}:is(dialog[open],dialog:open)::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#00000080}:is(dialog[open],dialog:open) fieldset{border:1px solid #000;border-radius:5px;justify-content:center;gap:1.5rem;margin-top:1rem;padding:1rem;display:flex}:is(dialog[open],dialog:open) legend{margin:0 auto;padding:0 .5rem}#win,#loose{padding-top:3rem;overflow:visible}:is(#win,#loose) .unicorn{background-color:pink;border:1px solid #000;border-radius:5rem;padding:1.5rem;font-size:2rem;position:absolute;top:0;left:50%;transform:translate(-10%,-50%)}:is(#win,#loose) .unicorn.john{background-color:#fff;transform:scaleX(-1)translate(90%,-50%)}:is(#win,#loose) .heart{font-size:1.5rem;animation:.6s ease-in-out infinite pulse;position:absolute;top:0;left:50%;transform:translate(-50%,40%)}:is(#win,#loose) button{border-radius:0 0 10px 10px}#loose .unicorn{background-color:#fff;transform:translate(-50%,-50%)}header{text-transform:uppercase;color:#a9a9a9;background-color:#f8f8ff;grid-template-columns:1fr min-content 1fr;place-items:center;gap:.5rem;padding:.5rem 1rem;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:1rem;font-weight:700;display:grid}header .score{place-self:center start;font-size:.5rem}header .score>*{align-items:center;gap:.5em;display:flex}header .score span{color:#000;font-size:.75rem}header .timer{color:#000;font-size:2.25rem}header button{text-transform:uppercase;background-color:#fff;border:1px solid #000;border-radius:5px;place-self:center end;padding:.5rem .75rem;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:.75rem;font-weight:700}.path{width:100%;display:flex}.path .swatch,.path .path-end{flex:1;justify-content:center;align-items:center;height:3rem;display:flex}.path .swatch{position:relative}.path .swatch.active:before{content:"🦄";view-transition-name:unicorn-marker;background-color:#fff;border-radius:5rem;margin:.75rem;padding:.25rem;animation:.4s ease-in-out infinite impatient-flipped}.path .swatch.active~.swatch:before{content:"";background-color:#9b9b9be6;width:100%;height:100%;position:absolute;top:0;left:0}.path .path-end:before{content:"🦄";background-color:pink;border-radius:5rem;margin:.75rem;padding:.25rem;animation:.4s ease-in-out infinite impatient}.colors{flex:1;width:100%;display:flex}color-bar{flex:1;grid-template-rows:1fr 1fr;width:100%;display:grid;overflow:hidden}color-bar .target{justify-content:center;align-items:center;font-size:4rem;display:flex}color-bar .target div{background-color:#fff;border-radius:5rem;margin:.75rem;padding:1rem;display:none}color-bar[active=true] .target div{display:block}color-bar button{padding:1rem;position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}user-video{display:block;position:relative;overflow:hidden}user-video video,user-video .frozen-frame{object-fit:cover;width:100%;height:100%}user-video .avg-col{width:100%;height:2rem;position:absolute;top:0;left:0}user-video .sample-marker{pointer-events:none;border:2px solid #fff;outline:2px solid red;position:absolute}