@layer reset{*{box-sizing:border-box;margin:0;padding:0}}@layer base{:root{--color-bg:oklch(100% 0 0);--color-surface:oklch(97% .002 80);--color-surface-hover:oklch(94% .004 80);--color-ink:oklch(18% 0 0);--color-muted:oklch(50% 0 0);--color-accent:oklch(62% .16 80);--color-focus:oklch(62% .16 80);--radius:.75rem;--gap:1rem}body{background:var(--color-bg);color:var(--color-ink);min-block-size:100dvh;padding:2rem;font-family:system-ui,-apple-system,sans-serif}}@layer components{header{margin-block-end:2rem}h1{letter-spacing:-.01em;font-size:1.5rem;font-weight:600}.grid{gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));display:grid}.tile{background:var(--color-surface);border-radius:var(--radius);color:var(--color-ink);aspect-ratio:1;border:1px solid oklch(92% 0 0);flex-direction:column;justify-content:center;align-items:center;gap:.625rem;padding:1.25rem;text-decoration:none;transition:background .15s ease-out,border-color .15s ease-out;display:flex}.tile:hover{background:var(--color-surface-hover);border-color:oklch(88% 0 0)}.tile:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.tile:active{background:var(--color-surface-hover)}.tile img{border-radius:.5rem;block-size:44px;inline-size:44px}.tile span{text-align:center;overflow-wrap:break-word;max-inline-size:100%;color:var(--color-ink);font-size:.8125rem;font-weight:500;line-height:1.3}@media (prefers-reduced-motion:reduce){.tile{transition:none}}}