.container{&.theme{.wrapper{display:flex;width:100%;padding:1.875rem 1.875rem 2.25rem;gap:1.5rem;border-radius:1.125rem;background-color:var(--background-color-secondary);.instructions{display:flex;flex-direction:column;width:72%;gap:1.5rem;.screenshot{display:flex;position:relative;align-items:center;justify-content:center;width:100%;max-height:54vh;padding:1.5rem;overflow:hidden;border-radius:.75rem;background-color:var(--background-color-primary);img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:.375rem}}}.sidebar{display:block;display:flex;position:-webkit-sticky;position:sticky;top:8em;flex-grow:1;flex-shrink:1;flex-basis:0;flex-direction:column;height:-moz-fit-content;height:fit-content;max-height:100%;padding:1.5rem;gap:1em;border-radius:.75rem;background-color:var(--background-color-primary);h4{position:relative;font-size:.875rem;.count{display:flex;position:absolute;top:50%;right:0;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;transform:translateY(-50%);border-radius:100%;background-color:var(--background-color-tertiary);font-weight:700;font-size:.625rem;line-height:1}}ul{display:flex;flex-direction:column;margin:0 0 .75rem;padding:0;gap:.5rem;line-height:1.8;list-style:none;a{&:not(.contributor){display:flex;align-items:center;width:100%;gap:.75rem;transition:color .3s var(--ease-fluid);&:focus,&:hover{color:var(--color)}}}.contributor{display:flex;align-items:center;width:100%;padding:.5rem;gap:.75rem;border-radius:1rem;transition:background-color .3s var(--ease-sharp),color .3s var(--ease-fluid);div{position:relative;width:1.5rem;height:1.5rem;overflow:hidden;border-radius:100%;background-color:var(--background-color-primary);img{width:100%;height:100%;object-fit:cover;object-position:center}}&:focus,&:hover{background-color:var(--background-color-secondary);color:var(--color)}}&.contributors{max-height:60vh;overflow-y:auto;gap:.25rem}}}}@media (max-width:60rem){.wrapper{flex-direction:column;padding:1.5rem;.instructions{flex:none;width:100%}.sidebar{position:relative;top:unset;ul{&.contributors{max-height:100%;overflow:hidden}}}}}}}.copy-button{aspect-ratio:1/1;height:-moz-fit-content;height:fit-content;padding:.5em;.tick{display:none;transition:display .3s var(--ease-elastic);path{stroke-dasharray:24;stroke-dashoffset:24}}&.copied{.tick{display:block;color:var(--green);path{animation:drawTick .5s var(--ease-fluid) forwards}}}}@keyframes drawTick{to{stroke-dashoffset:0}}.hero{display:flex;position:relative;align-items:center;justify-content:center;width:100%;min-height:25rem;overflow:hidden;background-image:linear-gradient(to bottom,var(--hero-background-color-primary),var(--hero-background-color-secondary));background-color:var(--hero-background-color-primary);.matrix-rain,.starry-sky{position:absolute;inset:0}.matrix-rain{mix-blend-mode:hard-light;opacity:.042}.castle{z-index:2;position:absolute;bottom:-.5rem;width:100%;height:100%;background-image:url(/images/hero/castle.svg);background-position:bottom;background-size:contain;background-repeat:no-repeat}.container{display:flex;z-index:3;position:relative;flex-direction:column;align-items:center;justify-content:center;.icon{display:flex;align-items:center;justify-content:center;width:11.25rem;height:11.25rem;border-radius:100%;img,svg{width:100%;height:100%;object-fit:contain}&.dynamic{img,svg{width:80%;height:80%}}}.header{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center;h1{color:var(--color-display);font-size:var(--font-size-display)}p{max-width:80%;margin-top:.25rem;color:var(--color-heading);font-weight:600;font-size:.875rem}.cta{margin-top:1.125rem}}.video{display:flex;position:relative;align-items:center;justify-content:center;div{display:flex;position:relative;height:18.75rem;overflow:hidden;border-radius:.75rem;-webkit-backdrop-filter:blur(.125rem);backdrop-filter:blur(.125rem);iframe{aspect-ratio:16/9;margin:0;padding:0;border:none}}}}&.contribute{background-image:none;background-color:var(--background-color-secondary)}&.shop{.container{flex-direction:row;justify-content:space-between;gap:2.25rem;.header{align-items:flex-start;max-width:20rem;text-align:left;h1{line-height:1.2}p{max-width:100%;margin-top:.75rem;line-height:1.8;text-wrap:balance}.cta{margin-top:2.625rem}}}}&.pro{min-height:30rem;margin-top:calc(-1 * var(--page-sections-spacing))}@media (max-width:60rem){.castle{left:-234%;width:402%}&.shop{.container{flex-direction:column;padding:2.25rem 1.875rem;.header{max-width:100%}.video{width:100%;div{width:100%;height:auto}}}}}}.anchor-heading{position:relative;scroll-margin:6rem;.anchor-link{position:absolute;top:calc(50% - .0625rem);right:calc(100% + .375rem);transform:translateY(-50%);font-size:var(--font-size-caption);line-height:1;font-family:var(--font-mono);text-decoration:none;opacity:0;transition:opacity .42s var(--ease-fluid),color .3s var(--ease-fluid)}&:focus-within,&:hover,&:target{a{opacity:1}}}.sh-block{--sh-class:var(--purple);--sh-comment:var(--code-comment);--sh-entity:var(--green);--sh-identifier:var(--code-foreground);--sh-jsxliterals:var(--purple);--sh-keyword:var(--pink);--sh-property:var(--cyan);--sh-sign:var(--code-foreground);--sh-string:var(--yellow);display:flex;position:relative;flex-direction:column;align-items:center;width:100%;margin-block:1em;overflow:hidden;border-radius:.375rem;background-color:var(--background-color-primary);line-height:1.6;font-family:var(--font-mono);pre{width:100%;margin:0;padding:.75rem 1.125rem;overflow-x:scroll;code{display:block;width:100%}}.copy-button{position:absolute;top:.5rem;right:.5rem;min-height:1.875rem}}