*{box-sizing:border-box}html,body{margin:0}body{font-family:system-ui,sans-serif;background:#fff;color:#1a1a22}.app{height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;gap:2vmin;padding:3vmin}header{display:flex;justify-content:space-between;align-items:start;gap:1rem}h1{margin:0;font-size:clamp(1.6rem,5vmin,3rem)}header p{margin:.2em 0 0;opacity:.6}select{font:inherit;padding:.4em;border-radius:8px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));grid-auto-rows:minmax(0,1fr);gap:2vmin;min-height:0}.tile{--c: #888;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4em;padding:1rem;text-align:center;text-decoration:none;border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 82%,#fff),color-mix(in srgb,var(--c) 75%,#000));box-shadow:0 6px 20px color-mix(in srgb,var(--c) 30%,transparent);transition:transform .15s,box-shadow .15s;min-height:0;overflow:hidden}.tile:hover,.tile:focus-visible{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 30px color-mix(in srgb,var(--c) 50%,transparent)}.emoji{font-size:clamp(2.5rem,12vmin,5rem)}.name{font-size:clamp(1.2rem,4vmin,2rem);font-weight:700}.desc{font-size:.9rem;opacity:.8;max-width:24ch}