@font-face{font-family:Fredoka;src:url(../assets/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:block}:root{--ink: #3b2414;--cream: #fff4dc;--leaf: #4f9a3c;--leaf-dark: #2f6b25;--sun: #ffb52e;--sun-dark: #d0801a;--sky: #47a7e0;--sky-dark: #2a74ad;--berry: #e2574c;--berry-dark: #a8352d;--stone: #8c7a66;--stone-dark: #5e4f40}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#2c5a24;font-family:Fredoka,Arial Rounded MT Bold,system-ui,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}#stage{position:fixed;inset:0;display:block}#ui{position:fixed;inset:0;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#ui>*{pointer-events:auto}.btn{--btn: var(--sun);--btn-dark: color-mix(in srgb, var(--btn) 70%, #000);--size: clamp(54px, 10vmin, 96px);position:absolute;width:var(--size);height:var(--size);border-radius:50%;border:max(3px,calc(var(--size) * .05)) solid var(--cream);background:var(--btn);color:#fff;box-shadow:0 calc(var(--size) * .07) 0 var(--btn-dark),0 calc(var(--size) * .12) calc(var(--size) * .18) #0000004d;display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .2s;font:inherit}.btn svg{width:56%;height:56%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))}.btn:active{transform:translateY(calc(var(--size) * .06)) scale(.96);box-shadow:0 calc(var(--size) * .01) 0 var(--btn-dark)}.btn.selected{outline:max(4px,calc(var(--size) * .07)) solid #fff;outline-offset:2px;transform:scale(1.08)}.btn.hidden{opacity:0;pointer-events:none}.btn span{position:absolute;top:100%;margin-top:calc(var(--size) * .14);font-size:calc(var(--size) * .24);font-weight:700;white-space:nowrap;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}.btn.big{--size: clamp(110px, 24vmin, 210px)}.btn.pulse{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.08)}}.palette{position:absolute;display:grid;gap:clamp(5px,1.2vmin,12px)}.swatch{--s: clamp(38px, 7.2vmin, 66px);width:var(--s);height:var(--s);border-radius:50%;border:4px solid var(--cream);box-shadow:0 3px #00000040,inset 0 -5px #00000026;cursor:pointer;transition:transform .12s;padding:0}.swatch.selected{transform:scale(1.18);border-color:#fff;box-shadow:0 0 0 4px var(--ink),0 4px #0000004d}.swatch.rainbow{background:conic-gradient(#ff4d4d,#ffb52e,#ffe84a,#5ccf4a,#47a7e0,#8b5bd6,#ff4d4d)}.banner{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 2vmin);transform:translate(-50%);padding:.25em 1em .3em;font-size:clamp(22px,5vmin,48px);font-weight:700;color:#fff;background:var(--stone);border:4px solid var(--cream);border-radius:999px;box-shadow:0 5px 0 var(--stone-dark),0 8px 18px #0000004d;white-space:nowrap;pointer-events:none}#loading{position:fixed;inset:0;display:grid;place-content:center;gap:4vmin;background:radial-gradient(circle at 50% 40%,#6fb24f,#2c5a24);transition:opacity .5s;z-index:10}#loading.done{opacity:0;pointer-events:none}.loading-dino{width:22vmin;height:22vmin;margin:auto;border-radius:50%;background:var(--cream) url(../assets/icons/icon-192.png) center / 80% no-repeat;box-shadow:0 1.2vmin #0003;animation:bob 1s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-2vmin) rotate(-4deg)}}.loading-bar{width:50vmin;height:3vmin;border-radius:99px;background:#00000040;overflow:hidden;border:3px solid var(--cream)}#loading-fill{width:0;height:100%;background:var(--sun);transition:width .2s}#rotate{display:none}@media (orientation: portrait) and (max-width: 600px){#rotate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#6fb24f,#2c5a24)}#rotate:after{content:"\21bb";position:absolute;top:calc(50% + 32vw);font-size:16vw;font-weight:700;color:var(--cream)}.rotate-phone{width:28vw;height:48vw;border:2.4vw solid var(--cream);border-radius:5vw;animation:turn 2.2s ease-in-out infinite}}@keyframes turn{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media (max-height: 520px){.palette.colors{grid-template-columns:repeat(3,1fr)!important}.swatch{--s: clamp(30px, 8.5vmin, 48px);border-width:3px}}@media (prefers-reduced-motion: reduce){.btn.pulse,.loading-dino{animation:none}}