:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--sky-top:#8fd0ff;--sky-bottom:#d8f0ff;--grass-top:#b6e388;--grass-bottom:#7cc35a;--ink:#1f3a4d;--cloud:#ffffffe6}html{background:var(--grass-bottom);min-height:100%}body{min-height:100dvh;color:var(--ink);background:linear-gradient(to bottom, var(--sky-top) 0, var(--sky-bottom) 17rem, var(--grass-top) 17rem, var(--grass-bottom) 100%);-webkit-tap-highlight-color:transparent;margin:0;font-family:ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;position:relative;overflow-x:hidden}.sky{pointer-events:none;height:0;position:absolute;inset:0 0 auto}.sky:before{content:"";background:#ffe066;border-radius:50%;width:4.5rem;height:4.5rem;position:absolute;top:1.5rem;right:2rem;box-shadow:0 0 0 .75rem #ffe06659}.sky:after{content:"";background:var(--cloud);width:2.75rem;height:2.75rem;box-shadow:2.1rem -.9rem 0 .5rem var(--cloud), 4.4rem 0 0 -.1rem var(--cloud), calc(92vw - 16rem) 5.5rem 0 -.3rem var(--cloud), calc(92vw - 14.1rem) 4.8rem 0 .3rem var(--cloud), calc(92vw - 12.2rem) 5.5rem 0 -.5rem var(--cloud);border-radius:50%;position:absolute;top:3rem;left:8%}.portal{z-index:1;box-sizing:border-box;max-width:60rem;padding:3rem max(1rem, env(safe-area-inset-right)) 4rem max(1rem, env(safe-area-inset-left));margin:0 auto;position:relative}.portal__title{text-align:center;color:#fff;text-shadow:0 3px #2f7fc0,0 6px 14px #143c644d;margin:0 0 2.5rem;font-size:clamp(2.5rem,9vw,4rem);font-weight:800}.tiles{margin:0;grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr));gap:1.25rem;max-width:44rem;margin-inline:auto;padding:0;list-style:none;display:grid}.tile{--tile:#e5484d;--tile-dark:#b3262b;box-sizing:border-box;background:var(--tile);height:100%;box-shadow:0 6px 0 var(--tile-dark), 0 12px 24px #14321e40;color:#fff;text-align:center;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:1.75rem;flex-direction:column;align-items:center;gap:.4rem;padding:.9rem .9rem 1.1rem;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex}.tile--0{--tile:#e5484d;--tile-dark:#b3262b}.tile--1{--tile:#f5c211;--tile-dark:#c79a00;color:#3d2c00}.tile--2{--tile:#3b82f6;--tile-dark:#1d5fd0}.tile--3{--tile:#30a46c;--tile-dark:#1f7a4d}.tile--4{--tile:#8e4ec6;--tile-dark:#6a2fa0}.tile__frame{aspect-ratio:1;background:#ffffffeb;border-radius:1.25rem;place-items:center;width:100%;display:grid}.tile__icon{width:78%;height:78%}.tile__title{font-size:1.5rem;font-weight:800;line-height:1.1}.tile__description{opacity:.9;font-size:.85rem;line-height:1.3}.tile:active{box-shadow:0 2px 0 var(--tile-dark), 0 6px 12px #14321e40;transform:translateY(4px)scale(.96)}.tile:focus-visible{outline-offset:4px;outline:4px solid #fff}@media (hover:hover){.tile:hover{animation:.6s ease-in-out tile-wobble}}@keyframes tile-wobble{0%,to{rotate:0deg}25%{rotate:-2deg}75%{rotate:2deg}}@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{animation:none}.tile:active{transform:none}}.empty{text-align:center;background:#ffffffd9;border-radius:1rem;padding:1rem 1.25rem}@media (width<=30rem){.sky:before{width:3rem;height:3rem;top:1rem;right:1.25rem;box-shadow:0 0 0 .5rem #ffe06659}.sky:after{width:2rem;height:2rem;box-shadow:1.5rem -.6rem 0 .35rem var(--cloud), 3.1rem 0 0 -.1rem var(--cloud);top:1.5rem;left:1.5rem}.portal{padding-top:5.5rem}.portal__title{margin-bottom:1.75rem}.tiles{gap:1rem}}
