: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 3px 0 #3f6f9c}.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:4px solid var(--accent);border-radius:20px;box-shadow:0 5px 0 var(--accent);transition:transform .12s}.card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--accent)}.card:focus-visible{outline:4px solid #3a2a14;outline-offset:3px}.emoji{font-size:48px;line-height:1}.text{display:flex;flex-direction:column}.text strong{font-size:22px;font-weight:800}