@keyframes reveal-tile-stamp{0%{opacity:0;transform:scale(1.45) rotate(-8deg)}to{opacity:1;transform:none}}@layer components{.nav-tile{--tile:24px;--tile-glyph:14px;position:relative;isolation:isolate;display:inline-grid;flex:none;width:var(--tile);height:var(--tile);place-items:center;border-radius:var(--radius-md);background:var(--hue-tint,var(--surface-raised));color:var(--hue,var(--ink-muted));transition:color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-stamp)}.nav-tile[data-size=md]{--tile:28px;--tile-glyph:16px}.nav-tile[data-size=lg]{--tile:32px;--tile-glyph:18px}.nav-tile[data-size=xl]{--tile:40px;--tile-glyph:20px;border-radius:var(--radius-lg)}.nav-tile>svg{width:var(--tile-glyph);height:var(--tile-glyph)}.nav-tile:after,.nav-tile:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--hue,var(--ink-faint));opacity:0;pointer-events:none}.nav-tile:before{transform:scale(.6)}.nav-tile:after{transition:opacity var(--duration-instant) var(--ease-standard)}.nav-tile[data-state=on]{color:var(--ink-inverse)}.nav-tile[data-state=on]:before{opacity:1;transform:none;animation:reveal-tile-stamp var(--duration-slow) var(--ease-stamp) backwards}.nav-tile[data-planned]{border:1px dashed var(--hue,var(--border-strong));background:transparent}.nav-tile[data-planned][data-state=on]{background:var(--hue-tint,transparent);color:var(--hue,var(--ink))}.nav-tile[data-planned]:before{display:none}.nav-tile[data-plain]{background:transparent;color:inherit}.nav-tile[data-plain]:after,.nav-tile[data-plain]:before{display:none}@media (hover:hover){:where(a,button,[role=option]):hover>.nav-tile:not([data-state=on]):after{opacity:.2}:where(a,button,[role=option]):hover>.nav-tile{transform:scale(1.08)}}:where(a,button):active>.nav-tile{transform:scale(.94)}}