.animated-code{--code-accent:var(--section-color,var(--projects));isolation:isolate;border-block:.14rem solid var(--paper);background:var(--code-surface,#24292e);width:100%;color:var(--code-text,#e1e4e8);font-family:var(--font-body);margin:clamp(2.2rem,6vw,4rem) 0;position:relative}.animated-code:before,.animated-code:after{content:"";z-index:-1;background:var(--code-accent);position:absolute}.animated-code:before{width:36%;height:.55rem;inset:-.55rem 0 auto 8%;transform:skew(-24deg)}.animated-code:after{width:22%;height:.5rem;inset:auto 7% -.5rem auto;transform:skew(30deg)}.animated-code__header{border-bottom:.1rem solid color-mix(in srgb, var(--code-text) 28%, transparent);justify-content:space-between;align-items:center;gap:1rem;min-height:3.4rem;padding:.65rem clamp(.8rem,3vw,1.2rem);display:flex}.animated-code__title{align-items:baseline;gap:.65rem;min-width:0;display:flex}.animated-code__actions{flex:none;align-items:center;gap:.25rem;min-width:0;display:flex}.animated-code__actions button{min-width:4.9rem;min-height:2.3rem;color:var(--code-text);font:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:.35rem;padding:.35rem .65rem;font-size:.76rem;font-weight:820;transition:background-color .16s,color .16s;display:inline-flex}.animated-code__actions button:hover,.animated-code__actions button:focus-visible,.animated-code__actions button[aria-pressed=true],.animated-code__actions button[data-copied]{background:var(--code-accent);color:var(--ink)}.animated-code__actions button:focus-visible{outline:.18rem solid var(--code-accent);outline-offset:-.18rem}.animated-code__title strong{font-family:var(--font-display);font-variation-settings:"wdth" 108, "wght" 780;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;overflow:hidden}.animated-code__title span,.animated-code__header small{color:color-mix(in srgb, var(--code-text) 62%, var(--code-surface));font-size:.72rem;font-weight:800}.animated-code__title span{text-transform:uppercase}.animated-code__tabs{border-bottom:.1rem solid color-mix(in srgb, var(--code-text) 18%, transparent);flex-wrap:wrap;gap:.35rem;padding:.55rem clamp(.8rem,3vw,1.2rem);display:flex}.animated-code__tabs button{min-height:2.75rem;color:var(--code-text);font:inherit;cursor:pointer;clip-path:polygon(.35rem 0,100% 0,calc(100% - .35rem) 100%,0 100%);transition:background-color .18s ease, color .18s ease, transform .18s var(--ease-out);background:0 0;border:0;padding:.55rem .85rem;font-size:.82rem;font-weight:820}.animated-code__tabs button[aria-selected=true]{background:var(--code-accent);color:var(--ink);transform:rotate(-1deg)}.animated-code__tabs button:hover:not([aria-selected=true]){background:color-mix(in srgb, var(--code-accent) 22%, transparent)}.animated-code__tabs button:focus-visible,.animated-code__window:focus-visible{outline:.18rem solid var(--code-accent);outline-offset:-.18rem}.animated-code__scroll-state{border-bottom:.1rem solid color-mix(in srgb, var(--code-text) 18%, transparent);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.animated-code__scroll-state span{color:color-mix(in srgb, var(--code-text) 62%, var(--code-surface));text-align:center;padding:.7rem 1rem;font-size:.78rem;font-weight:820;position:relative}.animated-code__scroll-state span:after{content:"";background:var(--code-accent);height:.22rem;transition:transform .38s var(--ease-out);position:absolute;inset:auto 12% 0;transform:scaleX(0)}.animated-code__scroll-state span.is-active{color:var(--code-text)}.animated-code__scroll-state span.is-active:after{transform:scaleX(1)}.animated-code__window{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-color:var(--code-accent) color-mix(in srgb, var(--code-surface), black 20%);max-width:100%;overflow:auto}.animated-code__window .shiki-magic-move-container{box-sizing:border-box;tab-size:2;width:max-content;min-width:100%;min-height:8rem;margin:0;padding:clamp(1rem,4vw,1.5rem);font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:clamp(.76rem,2vw,.9rem);line-height:1.65}.animated-code__window .shiki-magic-move-item{white-space:pre}.animated-code__window.is-wrapped{overflow-x:hidden}.animated-code__window.is-wrapped .shiki-magic-move-container{white-space:pre-wrap;overflow-wrap:anywhere;width:100%;min-width:0}.animated-code__window.is-wrapped .shiki-magic-move-item{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}.animated-code figcaption{border-top:.1rem solid color-mix(in srgb, var(--code-text) 18%, transparent);min-height:3rem;color:color-mix(in srgb, var(--code-text) 62%, var(--code-surface));flex-wrap:wrap;align-items:baseline;gap:.35rem .7rem;padding:.65rem clamp(.8rem,3vw,1.2rem);font-size:.82rem;display:flex}.animated-code figcaption strong{color:var(--code-accent);font-weight:850}@media (width<=34rem){.animated-code__title{flex-direction:column;align-items:flex-start;gap:.05rem}.animated-code__header{align-items:flex-start}.animated-code__actions{flex-direction:column;align-items:flex-end}.animated-code__actions small{margin-right:.35rem}.animated-code__actions button{min-width:2.75rem;min-height:2.75rem;padding-inline:.55rem}.animated-code__actions button span{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.animated-code__tabs{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.animated-code__tabs button{width:100%}}@media (prefers-reduced-motion:reduce){.animated-code *,.animated-code :before,.animated-code :after{scroll-behavior:auto!important;transition-duration:.01ms!important;transition-delay:0s!important}}