@import"https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap";#root{margin:0;width:100vw;height:100vh;display:flex}#root,button{font-family:"Noto Serif",serif}.mode-switcher{width:101px;height:56px;background-size:cover;rotate:180deg;transition:.1s width linear,.1s height linear}.mode-switcher:hover{width:112px;height:66px;cursor:pointer}.hookie-monster{background:url(/assets/cookiemonster-DjWzk4ik.png);width:300px;height:300px;background-size:cover;margin-top:32px}.mode-switcher.count-von-counterexample-mode{background:url(/assets/cookiemonster-DjWzk4ik.png);background-size:cover}.mode-switcher.hookie-monster-mode{background:url(/assets/count-von-counterexample-CnRscCoK.png);background-size:cover}.hookie-monster.level4{margin-top:0}.hookie-monster.count-von-counterexample-mode{background:url(/assets/count-von-counterexample-CnRscCoK.png);background-size:cover;background-position-x:-100px}.cookie{background:url(/assets/cookie-QSqurojF.png);width:128px;height:128px;border:none;background-size:cover;transition:.2s width,.2s height;will-change:width,height}.enough{font-weight:700;font-size:32px}.cookie:hover{width:152px;height:152px;cursor:pointer}.left{display:flex;align-items:center;flex-direction:column;width:30vw;align-self:flex-end}.left.level4{align-self:flex-start;justify-content:space-between;height:100%}.middle{display:flex;align-items:center;align-self:center;flex-direction:column;width:40vw}.middle p{margin-bottom:24px}.right,.cookie-recipe{background:#e6e6e6ed;width:30vw;text-align:center;padding:16px}.right article{overflow-y:auto;height:80vh;margin-bottom:32px;padding-right:16px}.cookie-recipe article{overflow-y:auto;width:90%;height:60vh}.cookie-recipe article p,.cookie-recipe article li{background:none;margin:10px;text-align:left}.cookie-recipe article li{margin-left:16px}.cookie-recipe{background:#fff;color:#000;position:absolute;left:65vw;height:calc(100vh - 32px)}p{margin:0 auto;padding:16px;background:#ffffe0;text-align:center;width:fit-content}.right h1,.right h2{color:#000}.right p,li{background:none;color:#111;line-height:2;font-weight:500}.right li{text-align:left}.levels{display:flex;justify-content:center;gap:16px;margin-top:auto}.level-link{width:24px;height:24px;background:#888;border-radius:64px;background:green;transition:.2s background linear;will-change:background}.level-link:hover{background:#006400}.levels .active{background:#90ee90;outline:darkgreen 4px solid}.show-recipe-button{background:#00008b;color:#fff;border:none;transition:background .2s linear;will-change:background;padding:8px}.show-recipe-button:hover{background:#00f;cursor:pointer}code{background:#91ee91;padding:4px;font-weight:700;color:#000}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){.cookie{animation:spin infinite 5s linear}}@media screen and (max-width: 800px){#root{flex-direction:column}.left,.middle{width:100%}.left{margin-top:32px;height:60vh}.left.level4{margin-top:0;gap:32px}.middle{height:30vh}.middle p{display:none}.hookie-monster{margin:32px auto;width:200px;height:200px}.cookie{width:80px;height:80px;background-size:cover}.cookie:hover{width:96px;height:96px}.right{height:110vh;width:calc(100% - 32px);padding-bottom:32px;margin-top:32px}.right article{height:60vh}.cookie-recipe{left:0;width:calc(100vw - 32px);top:30vh}}:root{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:url(/assets/background-CbMNv5Es.jpg);background-position-y:40%;background-size:cover;margin:0;height:100vh}
