.code-banner{--chip-size:clamp(13px, 1.45vw, 20px)}.code-banner .code-banner__field{contain:layout paint;gap:calc(var(--chip-size) * 1.8);--shadow-room:48px;padding-block:calc(var(--chip-size) * .9 + var(--shadow-room));margin-block:calc(var(--shadow-room) * -1);flex-direction:column;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}.code-banner .code-banner__row{z-index:var(--z);translate:var(--offset) 0;opacity:0;animation:code-banner-in .9s cubic-bezier(.22, 1, .36, 1) var(--delay) forwards;position:relative}.code-banner .code-banner__track{will-change:transform;width:max-content;animation:code-banner-drift var(--duration) linear infinite;align-items:center;display:flex}.code-banner .code-banner__track--reverse{animation-direction:reverse}.code-banner .code-banner__row:has(.code-banner__icon:hover) .code-banner__track{animation-play-state:paused}.code-banner[data-offscreen] .code-banner__track{animation-play-state:paused}.code-banner .code-banner__chip{margin-right:calc(var(--chip-size) * -.15);font-family:ui-monospace,SF Mono,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--chip-size);white-space:pre;flex:none;padding:.12em .45em;line-height:1.35;display:block}.code-banner .code-banner__chip--comment{font-style:italic}.code-banner .code-banner__icon{z-index:2;width:calc(var(--chip-size) * 3);height:calc(var(--chip-size) * 1.59);margin:0 calc(var(--chip-size) * .5);flex:none;transition:transform .3s cubic-bezier(.22,1,.36,1);display:block;position:relative}.code-banner .code-banner__icon-art{--icon-shadow:drop-shadow(0 4px 10px #0000002e);inset-inline:0;position:absolute;top:50%;translate:0 -50%}.code-banner .code-banner__icon-art img{filter:var(--icon-shadow)!important}.code-banner .code-banner__icon:hover,.code-banner .code-banner__icon:focus-visible{z-index:3;transform:scale(1.08)rotate(-4deg)}.code-banner .code-banner__copy{opacity:0;--from:0px;animation:.9s cubic-bezier(.22,1,.36,1) .45s forwards code-banner-in}@keyframes code-banner-in{0%{opacity:0;transform:translateX(var(--from,0px))}to{opacity:1;transform:none}}@keyframes code-banner-drift{to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.code-banner .code-banner__row,.code-banner .code-banner__copy{opacity:1;animation:none}.code-banner .code-banner__track{animation:none}}
.icon-dissolve{position:relative}.icon-dissolve>.icon-dissolve__art{transition:opacity .9s,filter .9s}.icon-dissolve>.icon-dissolve__art--dark{position:absolute;inset:0}.icon-dissolve .icon-dissolve__art--light{opacity:0;filter:blur(6px)}.icon-dissolve .icon-dissolve__art--dark,.icon-dissolve[data-settled] .icon-dissolve__art--light{opacity:1;filter:blur()}.icon-dissolve[data-settled] .icon-dissolve__art--dark{opacity:0;filter:blur(6px)}@media (prefers-color-scheme:dark){.icon-dissolve .icon-dissolve__art--light{opacity:1;filter:blur()}.icon-dissolve .icon-dissolve__art--dark,.icon-dissolve[data-settled] .icon-dissolve__art--light{opacity:0;filter:blur(6px)}.icon-dissolve[data-settled] .icon-dissolve__art--dark{opacity:1;filter:blur()}}@media (prefers-reduced-motion:reduce){.icon-dissolve>.icon-dissolve__art{transition:none}}