.topics{border-bottom:1px solid var(--color-line);width:100%;max-width:795px;margin-inline:auto;padding-bottom:40px}.topics__heading{color:#f7f5ed;font-family:var(--font-serif);font-size:var(--text-lg);letter-spacing:0;margin-bottom:24px;font-weight:400;line-height:32.4px}.topics--center .topics__heading{text-align:center}.topics ul{flex-wrap:wrap;gap:20px 28px;margin:0;padding:0;list-style:none;display:flex}.topics--center ul{justify-content:center}.topics a,.topics button{text-align:center;flex-direction:column;align-items:center;gap:10px;width:96px;display:flex}.topics button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0}.topics__disc{width:72px;height:72px;transition:transform .35s var(--ease);border-radius:22px;place-items:center;display:grid;position:relative}.topics__disc:before{content:"";z-index:0;background:radial-gradient(closest-side, var(--c1), color-mix(in srgb, var(--c2) 60%, transparent) 60%, transparent);opacity:.6;filter:blur(12px);transition:opacity .35s var(--ease);border-radius:50%;position:absolute;inset:8px 6px 0}.topics__tile{z-index:1;backdrop-filter:blur(14px)saturate(1.5);width:60px;height:60px;animation:topic-float 4.5s ease-in-out var(--delay,0s) infinite;background:linear-gradient(160deg,#ffffff3d,#ffffff12 55%,#ffffff1f);border:1px solid #ffffff38;border-radius:18px;place-items:center;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff59,inset 0 -12px 22px #00000047,0 12px 24px -14px #000c}.topics__tile:after{content:"";pointer-events:none;background:linear-gradient(#ffffff2e,#fff0);position:absolute;inset:0 0 50%}.topics__tile svg{z-index:1;width:38px;height:38px;filter:drop-shadow(0 3px 6px #00000059) drop-shadow(0 0 8px color-mix(in srgb, var(--c1) 45%, transparent));position:relative}.topics__name{color:var(--color-text-muted);letter-spacing:-.01em;transition:color var(--duration) var(--ease);font-size:14px;font-weight:500;line-height:1.3}.topics :is(a,button):hover .topics__disc,.topics :is(a,button):focus-visible .topics__disc{transform:translateY(-2px)}.topics :is(a,button):hover .topics__disc:before,.topics :is(a,button):focus-visible .topics__disc:before{opacity:.7}.topics :is(a,button):hover .topics__name,.topics :is(a,button):focus-visible .topics__name{color:var(--color-text)}.topics :is(a[aria-current=page],button[aria-pressed=true]) .topics__disc{box-shadow:0 0 0 2px var(--color-highlight), 0 0 0 6px #e0f11f1f}.topics :is(a[aria-current=page],button[aria-pressed=true]) .topics__name{color:var(--color-text);font-weight:600}@keyframes topic-float{0%,to{translate:0}50%{translate:0 -4px}}@media (prefers-reduced-motion:reduce){.topics__tile{animation:none}.topics__disc:after{display:none}}.topics--tiles .topics__disc{width:80px;height:80px}.topics--tiles .topics__disc:before,.topics--tiles .topics__tile:after{display:none}.topics--tiles .topics__tile{background:var(--tile);width:72px;height:72px;box-shadow:none;backdrop-filter:none;transition:transform .2s var(--ease), box-shadow .2s var(--ease);border:0;border-radius:8px;animation:none}.topics--tiles .topics__tile svg{filter:none;width:48px;height:48px}.topics--tiles :is(a,button):hover .topics__tile,.topics--tiles :is(a,button):focus-visible .topics__tile{transform:translateY(-2px)}.topics--tiles .topics__name{color:#d4d4d8}.topics--tiles :is(a[aria-current=page],button[aria-pressed=true]) .topics__disc{box-shadow:none}.topics--tiles :is(a[aria-current=page],button[aria-pressed=true]) .topics__tile{box-shadow:0 0 0 3px var(--color-bg), 0 0 0 5px #fff}.topics--tiles :is(a[aria-current=page],button[aria-pressed=true]) .topics__name{color:#fff}@media (width<=767px){.topics--tiles .topics__disc{width:70px;height:70px}.topics--tiles .topics__tile{width:62px;height:62px}.topics--tiles .topics__tile svg{width:42px;height:42px}.topics{padding-bottom:28px}.topics__heading,.topics--center .topics__heading{text-align:left}.topics ul,.topics--center ul{margin:-12px calc(-1 * var(--gutter)) -8px;padding:20px var(--gutter) 14px;scroll-snap-type:x proximity;scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;gap:12px;position:relative;overflow-x:auto}.topics ul::-webkit-scrollbar{display:none}.topics li{scroll-snap-align:start;flex-shrink:0}.topics a,.topics button{width:84px}.topics__disc{border-radius:18px;width:64px;height:64px}.topics__tile{border-radius:16px;width:54px;height:54px}.topics__tile svg{width:34px;height:34px}.topics__name{font-size:12px}}
