.framework-friendly a{text-decoration:none}.framework-friendly a:hover{text-decoration:underline}@media screen and (max-width: 640px){.framework-friendly{padding:0 var(--spacing-outer);background:linear-gradient(180deg,var(--color-accent-dark) 20%,var(--color-black-zero) 100%)}.framework-friendly-illustration{width:100%;aspect-ratio:1.147;height:auto;position:relative}.framework-friendly-illustration img{width:100%;height:auto}.framework-friendly-illustration .framework-friendly-illustration-bg{position:absolute;width:100%;height:auto;transform:translateY(calc(0% - 20% * var(--scroll-delta)))}.framework-friendly-illustration .framework-friendly-illustration-mg{position:absolute;top:0;left:0;width:100%;height:auto;transform:translate(calc(0% + 5% * var(--scroll-delta))) translateY(calc(0% - 10% * var(--scroll-delta)))}.framework-friendly-illustration .framework-friendly-illustration-fg{position:absolute;top:0;left:0;width:100%;height:auto;transform:translate(calc(0% + -5% * var(--scroll-delta))) translateY(calc(0% - 15% * var(--scroll-delta)))}.framework-friendly-header-text-title{font-size:var(--font-size-xl);position:relative;margin-bottom:1em}.framework-friendly-header-text-title:after{content:"";position:absolute;top:calc(100% + .5 * var(--spacing-s));left:0;width:6vw;height:2px;background:var(--color-accent)}.framework-friendly-frameworks-title{font-size:var(--font-size-l);line-height:1.3;margin-top:2.5em}.framework-friendly-frameworks-title span{font-size:var(--font-size-base);font-weight:400;color:var(--color-white);letter-spacing:0}.framework-friendly-frameworks{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(auto,1fr);gap:var(--spacing-outer);border:2px solid var(--color-accent);padding:var(--spacing-outer);box-sizing:border-box;margin-top:1em}.framework{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--color-accent)}.framework-icon-container{width:3rem;height:3rem;margin:0 auto}.framework-name{color:var(--color-white)}.framework-friendly-cli{padding:var(--spacing-outer) 0}.framework-friendly-cli-title{font-size:var(--font-size-l)}.framework-friendly-cli-title span{font-size:1em;font-weight:inherit;color:var(--color-accent)}.framework-friendly-cli-command{display:flex;align-items:stretch;justify-content:space-between;gap:0;margin-bottom:.5em;position:relative}.framework-friendly-cli-command code{border-right:none;display:flex;align-items:center;padding:.5em 1em;font-size:3vw;position:relative;flex:1 0 auto}.framework-friendly-cli-command:after{content:"";position:absolute;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid var(--color-accent);pointer-events:none}.copied-message{position:absolute;right:0%;top:0;padding:0 1em;height:100%;width:calc(100% - 2em);background:var(--color-accent);border-radius:4px;color:var(--color-black);display:flex;align-items:center;justify-content:center;animation:frameworks-copy 3s forwards;transform-origin:50% 50%}@keyframes frameworks-copy{0%{opacity:0}5%{opacity:1}to{opacity:0}}}@media screen and (min-width: 640.1px){.framework-friendly{padding:0 var(--spacing-outer);position:relative}.framework-friendly:after{content:"";position:absolute;top:0;left:50%;width:100vw;height:100%;background:linear-gradient(180deg,var(--color-accent-dark) 0%,var(--color-black-zero) 50%);transform:translate(-50%);z-index:-1}.framework-friendly p{font-size:var(--font-size-m);line-height:1.3}.framework-friendly-header{display:flex;flex-direction:row-reverse;align-items:center;gap:var(--spacing-outer)}.framework-friendly-header-text{flex:0 1 calc(50vw - var(--spacing-outer))}.framework-friendly-illustration{flex:0 1 calc(50vw - var(--spacing-outer));position:relative;width:calc(50vw - var(--spacing-outer));aspect-ratio:1.147;height:auto}.framework-friendly-illustration img{width:100%;height:auto}.framework-friendly-illustration .framework-friendly-illustration-bg{position:absolute;width:100%;height:auto;transform:translate(calc(1% * var(--mousex-delta))) translateY(calc(1% * var(--mousey-delta) - 5% * var(--scroll-delta)))}.framework-friendly-illustration .framework-friendly-illustration-mg{position:absolute;top:0;left:0;width:100%;height:auto;transform:translate(calc(3% * var(--mousex-delta) + 5% * var(--scroll-delta))) translateY(calc(2% * var(--mousey-delta) - 5% * var(--scroll-delta)))}.framework-friendly-illustration .framework-friendly-illustration-fg{position:absolute;top:0;left:0;width:100%;height:auto;transform:translate(calc(3% * var(--mousex-delta) - 5% * var(--scroll-delta))) translateY(calc(3% * var(--mousey-delta) - 10% * var(--scroll-delta)))}.framework-friendly-header-text-title{font-size:var(--font-size-xl);position:relative;margin-bottom:1em}.framework-friendly-header-text-title:after{content:"";position:absolute;top:calc(100% + .5 * var(--spacing-s));left:0;width:6vw;height:2px;background:var(--color-accent)}.framework-friendly-frameworks-title{font-size:var(--font-size-l);line-height:1.1;margin-top:2.5em}.framework-friendly-frameworks-title span{font-size:var(--font-size-base);font-weight:400;color:var(--color-white);letter-spacing:0}.framework-friendly-frameworks{margin-top:1em;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(auto,1fr);gap:calc(2 * var(--spacing-outer));border:2px solid var(--color-accent);padding:var(--spacing-outer);box-sizing:border-box}}@media screen and (min-width: 640.1px) and (min-width: 700.1px){.framework-friendly-frameworks{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 640.1px) and (min-width: 1000.1px){.framework-friendly-frameworks{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 640.1px){.framework{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--color-accent)}.framework-icon-container{width:4rem;height:4rem;margin:0 auto}.framework-name{color:var(--color-white)}.framework-friendly-cli{display:flex;align-items:flex-start;padding:var(--spacing-outer) 0;gap:var(--spacing-outer)}.framework-friendly-cli-text{flex:0 0 60%}.framework-friendly-cli-title{font-size:var(--font-size-l)}.framework-friendly-cli-title span{font-size:1em;font-weight:inherit;color:var(--color-accent)}.framework-friendly-cli-commands{flex:0 0 40%}.framework-friendly-cli-command{display:flex;align-items:stretch;justify-content:space-between;gap:0;margin-bottom:.5em;position:relative}.framework-friendly-cli-command code{border-right:none;display:flex;align-items:center;padding:.5em 1em;font-size:.8rem;position:relative;flex:1 0 auto}.framework-friendly-cli-command:after{content:"";position:absolute;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid var(--color-accent);pointer-events:none}.copied-message{position:absolute;right:0%;top:0;padding:0 1em;height:100%;width:calc(100% - 2em);background:var(--color-accent);border-radius:4px;color:var(--color-black);display:flex;align-items:center;justify-content:center;animation:frameworks-copy 3s forwards;transform-origin:50% 50%}.copied-message:after{content:"";position:absolute;top:-2px;right:-2px;left:-2px;bottom:-2px;border:10px solid var(--color-accent);animation:frameworks-ray 1s cubic-bezier(.165,.84,.44,1) forwards}@keyframes frameworks-copy{0%{opacity:0}5%{opacity:1}50%{opacity:1}to{opacity:0}}@keyframes frameworks-ray{0%{transform:scaleY(1) scaleX(1);opacity:1;border-width:10px}to{transform:scaleY(1.4) scaleX(1.1);opacity:0;border-width:1px}}}