.container{&.contribute{display:flex;position:relative;flex-direction:column;align-items:center;gap:5.25rem;.our-project{width:90%;padding:5.25rem 3.75rem 5.625rem 48%;border:.25rem dashed var(--background-color-primary);border-radius:1.125rem;background:var(--background-color-secondary);background-image:url(/images/contribute/our-project.svg);background-position:50%;background-size:cover;background-repeat:no-repeat;line-height:1.8;h2{margin-bottom:1em}}.steps{display:flex;flex-direction:column;align-items:center;width:100%;max-width:90%;gap:1.5rem;text-align:center;.row{display:flex;position:relative;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:center;width:100%;overflow:hidden;gap:1.125rem;.item{display:flex;flex-grow:1;flex-shrink:1;flex-basis:0;flex-direction:column;gap:1.125rem}.box{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;min-height:10rem;padding:2.25rem;gap:1.125rem;border:.25rem dashed var(--background-color-primary);border-radius:1.125rem;background:var(--background-color-secondary);.index{z-index:1;position:absolute;top:54%;left:12%;transform:translate(-50%,-50%);color:var(--background-color-primary);font-weight:900;font-size:20rem;line-height:1;opacity:.3;pointer-events:none}.description{z-index:2;position:relative;line-height:1.8;text-align:center;a{color:var(--color);font-weight:500;text-decoration:underline;-webkit-text-decoration-style:solid;text-decoration-style:solid;-webkit-text-decoration-color:var(--color);text-decoration-color:var(--color);text-underline-offset:.1875rem;transition:color .3s var(--ease-fluid);&:focus,&:hover{color:var(--color-display)}}}svg{z-index:2;position:relative;transition:stroke .84s var(--ease-fluid)}&.step{min-height:18rem}}}}.color-palette{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;max-width:80%;gap:2rem;.toggle-group{display:flex;position:relative;width:-moz-fit-content;width:fit-content;max-width:100%;margin:0;padding:.375rem;overflow:auto hidden;gap:.5em;border-radius:.375rem;background-color:var(--background-color-secondary);.item{position:relative;button{z-index:2;position:relative;border-radius:.375rem;&:focus,&:hover{background-color:transparent;color:var(--color)}}.highlighter{z-index:1;position:absolute;inset:0;border-radius:.375rem;background-color:var(--background-color-primary)}}}.table-wrapper{display:flex;position:relative;max-width:100%;margin:0;padding:0;overflow:auto hidden;border:.375rem solid var(--background-color-secondary);border-radius:.375rem;table{width:max-content;margin:0;padding:0;border:none;border-collapse:collapse;background-color:var(--background-color-secondary);color:inherit;text-align:left;tr{td,th{min-width:13rem;padding:.75rem 1.125rem;border:none;.wrapper{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--font-size-caption);line-height:1}&:first-child{min-width:9rem}}}th{color:var(--color-display)}tbody{tr{background-color:var(--background-color-primary);transition:background-color .3s var(--ease-fluid);&:first-child{td{&:first-child{border-top-left-radius:.375rem}&:last-child{border-top-right-radius:.375rem}}}&:last-child{td{&:first-child{border-bottom-left-radius:.375rem}&:last-child{border-bottom-right-radius:.375rem}}}&:focus,&:hover{background-color:var(--background-color-secondary)}}}}}p{line-height:1.8;text-align:center;text-wrap:balance;a{color:var(--color);font-weight:500;text-decoration:underline;-webkit-text-decoration-style:solid;text-decoration-style:solid;-webkit-text-decoration-color:var(--color);text-decoration-color:var(--color);text-underline-offset:.1875rem;transition:color .3s var(--ease-fluid);&:focus,&:hover{color:var(--color-display)}}}}.contributors{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;max-width:40rem;gap:1.5rem;line-height:1.8;text-align:center;scroll-margin-top:12rem;h3{em{color:var(--color);font-style:normal;font-family:var(--font-mono)}}ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;padding:0;gap:.75rem;list-style:none;.item{display:flex;position:relative;align-items:center;padding:.125rem;gap:.75rem;border-radius:100%;transition:background-color .3s var(--ease-sharp);.avatar{position:relative;width:1.875rem;height:1.875rem;overflow:hidden;border-radius:100%;background-color:var(--background-color-primary);pointer-events:none;img{width:100%;height:100%;object-fit:cover;object-position:center;transition:filter .3s var(--ease-fluid)}}&:focus,&:hover{background-color:var(--background-color-tertiary);.avatar{img{filter:grayscale(100%)}}}}}}@media (max-width:60rem){gap:4.125rem;.our-project{width:100%;padding:1.875rem 1.5rem;background-position:0}.steps{.row{flex-direction:column}}.color-palette{width:100%;max-width:100%;.table-wrapper{width:100%}}.contributors{width:100%;max-width:100%}}}}.copy-button{aspect-ratio:1/1;min-height:-moz-fit-content;min-height:fit-content;padding:.5em;border-radius:.1875rem;.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:draw-tick .5s var(--ease-fluid) forwards}}}}@keyframes draw-tick{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}}}}}}