:root{--ink: #3a2a14;--cream: #fff7e0;--font: "Prompt", "Noto Sans Thai", "Leelawadee UI", "Tahoma", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%}body{font-family:var(--font);color:var(--ink);background:linear-gradient(#8fd0ff,#d8f0ff 60%,#b9e8a8);background-attachment:fixed}#hub{max-width:720px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 16px 32px}h1{margin:8px 0 0;text-align:center;font-size:clamp(32px,9vw,52px);font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(63,111,156,.55)}.sub{margin:4px 0 24px;text-align:center;font-weight:600}.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.card{display:flex;align-items:center;gap:14px;min-height:96px;padding:14px 18px;background:var(--cream);color:inherit;text-decoration:none;border:3px solid var(--accent);border-radius:24px;box-shadow:0 8px 20px #3a2a1424;transition:transform .15s cubic-bezier(.3,.9,.3,1),box-shadow .15s}@media (hover: hover){.card:hover{transform:translateY(-2px);box-shadow:0 12px 24px #3a2a142e}}.card:active{transform:scale(.98);box-shadow:0 4px 10px #3a2a1424}.card:focus-visible{outline:4px solid #3a2a14;outline-offset:3px}.emoji{font-size:48px;line-height:1}.text{display:flex;flex-direction:column;text-wrap:balance}@media (prefers-reduced-motion: reduce){.card{transition:none}}.text strong{font-size:22px;font-weight:800}@keyframes hub-in{0%{opacity:0;transform:translateY(14px)}}@keyframes wiggle{30%{transform:rotate(-10deg) scale(1.1)}65%{transform:rotate(7deg) scale(1.1)}}h1,.sub,.card{animation:hub-in .5s cubic-bezier(.16,1,.3,1) backwards}.sub{animation-delay:.06s}.card:nth-child(1){animation-delay:.12s}.card:nth-child(2){animation-delay:.2s}.card:nth-child(n+3){animation-delay:.28s}@media (hover: hover){.card:hover .emoji{animation:wiggle .6s ease-in-out}}@media (prefers-reduced-motion: reduce){h1,.sub,.card,.card:hover .emoji{animation:none}}