.ap-demo{inline-size:100%}.ap-toggle{display:inline-flex;align-items:center;gap:.5rem;margin-block-end:1rem}.ap-frame{position:relative;resize:horizontal;overflow:auto;min-width:12rem;max-width:100%;padding:1rem;border:1px dashed #9ca3af;border-radius:.5rem}.ap-grid{--ap-size:6rem;display:grid;grid-template-columns:repeat(auto-fill,var(--ap-size));gap:1rem}.ap-demo:has(.ap-toggle input:checked) .ap-grid{--ap-size:9rem}.ap-cell{aspect-ratio:1;background:#f3f4f6}.ap-cell,.ap-tile{border-radius:.5rem}.ap-tile{display:grid;place-items:center;inline-size:var(--ap-size);block-size:var(--ap-size);background:oklch(55% .15 calc(var(--i) * 30));color:white;font-size:1.5rem;font-weight:700}@supports (anchor-name:--ap-cell){.ap-cell{anchor-scope:--ap-cell;anchor-name:--ap-cell}.ap-tile{position:absolute;position-anchor:--ap-cell;inset:anchor(inside);transition:inset .3s ease,inline-size .3s ease,block-size .3s ease}}@media (prefers-reduced-motion:reduce){.ap-tile{transition:none}}.ap-unsupported{display:none}@supports not (anchor-name:--ap-cell){.ap-unsupported{display:block}}