@font-face{font-family:__GeistSans_48140f;src:url(/_next/static/media/e11418ac562b8ac1-s.p.woff2) format("woff2");font-display:swap;font-weight:100 900}@font-face{font-family:__GeistSans_Fallback_48140f;src:local("Arial");ascent-override:85.83%;descent-override:20.52%;line-gap-override:9.33%;size-adjust:107.19%}.__className_48140f{font-family:__GeistSans_48140f,__GeistSans_Fallback_48140f}.__variable_48140f{--font-geist-sans:"__GeistSans_48140f","__GeistSans_Fallback_48140f"}body,html{max-width:100vw;height:100%}html{font-size:62.5%}body{font-size:1.6rem}*,:after,:before{box-sizing:border-box;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1.6rem}a{color:inherit;text-decoration:none}:root{--AccentColor:#a32929;--GameAccentColor:#ff783a;--GameAccentSecondaryColor:#3acaff;--GameAccentTertiaryColor:#ff3ad4;--GameAccentFourthColor:#3affad;--GameOnAccentColor:#07080c;--GameBgColor:#07080c;--GameBgAltColor:#0d0f15;--GameSurfaceColor:#12151d;--GameCodeBgColor:#05060a;--GameTextColor:#f2f4f8;--GameTextSoftColor:#cfd5df;--GameTextDimColor:#9aa3b2;--GameCodeTextColor:#cfe9a0;--GameLineColor:hsla(0,0%,100%,.08);--GameLineStrongColor:hsla(0,0%,100%,.16);--GameSpotlightColor:var(--GameAccentColor);--GameSpotlightStrength:10%;--GameSpotlightSize:440px;--GameCardGlareColor:hsla(0,0%,100%,.07);--GameGridColor:var(--GameAccentColor);--GameGridStrength:30%;--EditorAccentColor:var(--GameAccentColor);--EditorSelectColor:var(--GameAccentSecondaryColor);--EditorOnAccentColor:var(--GameOnAccentColor);--EditorBgColor:#0a0b0d;--EditorPanelColor:#131418;--EditorPanelAltColor:#191a1f;--EditorFieldColor:#0d0e11;--EditorViewportColor:#07080a;--EditorTextColor:#e9ebef;--EditorTextDimColor:#8a8f99;--EditorLineColor:hsla(0,0%,100%,.07);--EditorLineStrongColor:hsla(0,0%,100%,.14);--EditorGridColor:var(--GameAccentColor);--EditorGridStrength:26%;--EditorAxisXColor:#ff5a5a;--EditorAxisYColor:#62e06a;--EditorAxisZColor:#4f8dff;--ColorBG:#f0f0f0;--ColorText:#0d0d0d;--ColorTextFaded:hsla(0,0%,5%,.6);--ColorBrand:var(--AccentColor);--ColorSelection:#66ffb3;--ColorSelection2:#66ffb3;--ColorMark:#85c2e0;--ColorMark2:var(--ColorMark);--ColorCardBackground:#f6f6f6;--ColorCardShadow:rgba(57,94,132,.15);--ColorCardShadowHover:var(--ColorCardShadow);--ColorActiveShadowBorder:#e0e5eb;--ColorButtonShadow:var(--ColorCardShadow);--ColorButtonActiveBackground:#f6f6f6;--NavBarHeight:60px;--ConstraintW:1000px;--border-radius:12px;--FontPrimary:var(--font-geist-sans),ui-monospace,Menlo,Monaco,"Cascadia Mono","Segoe UI Mono","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Mono","Droid Sans Mono","Courier New",monospace}body{background-color:var(--ColorBG);color:var(--ColorText);font-family:var(--FontPrimary)}body,html{-ms-overflow-style:none;scrollbar-width:none}body::-webkit-scrollbar,html::-webkit-scrollbar{display:none}::-webkit-scrollbar{width:10px;height:100%;cursor:pointer;height:0;width:0;width:8px;height:8px}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:linear-gradient(-45deg,#d8d8d8,#d8d8d8) #d8d8d8;border-radius:50px;margin-right:5px}@supports(scrollbar-color:hsl(0,0%,82%) rgb(24,24,24)){*{scrollbar-color:#d1d1d1 #181818;scrollbar-width:thin}}::selection{background-color:var(--ColorSelection);color:#000!important}li{list-style:none}.Link{cursor:pointer}mark{position:relative;color:#000;background-color:transparent;background-image:linear-gradient(135deg,var(--ColorMark),var(--ColorMark2));background-size:0 100%;background-repeat:no-repeat;transition:all .2s ease-in-out;padding-bottom:1px;border-bottom:1px solid #000}mark[data-highlighted=true]{background-size:100% 100%;border-bottom-color:transparent}mark[data-highlight=typescript]{--ColorMark:#85a3e0;--ColorMark2:#85a3e0}mark[data-highlight=javascript]{--ColorMark:#e0d985;--ColorMark2:#e0d985}mark[data-highlight=react]{--ColorMark:#75dbf0;--ColorMark2:#75dbf0}mark[data-highlight=nextjs]{--ColorMark:#0d0d0d;--ColorMark2:#0d0d0d}mark[data-highlight=nextjs][data-highlighted=true]{color:#fff}mark[data-highlight="styled components"]{--ColorMark:#e0b685;--ColorMark2:#e085c2}mark[data-highlight=framermotion]{--ColorMark:#d98cc2;--ColorMark2:#4d40dd}mark[data-highlight=redux]{--ColorMark:#b37de8;--ColorMark2:#8c3cdd}mark[data-highlight=htmlscss]{--ColorMark:#c67053;--ColorMark2:#c67053}mark[data-highlight=aws]{--ColorMark:#e68c4d;--ColorMark2:#e68c4d}mark[data-highlight=eccomerce]{--ColorMark:#57db62;--ColorMark2:#57db62}mark[data-highlight=nodejs]{--ColorMark:#5ac463;--ColorMark2:#1f7a27}mark[data-highlight=mongodb]{--ColorMark:#33993b;--ColorMark2:#33993b}mark[data-highlight=websockets]{--ColorMark:#e0d985;--ColorMark2:#e0d985}h1{max-width:var(--ConstraintW)}html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:unset}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}.button{background-color:transparent;color:var(--ColorText);border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}.button:disabled{pointer-events:none}.TagButton{--Size:60px;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:2px;padding:10px 20px;height:var(--Size);min-height:var(--Size);max-height:var(--Size);background-color:var(--ColorBG);color:var(--ColorText);cursor:pointer;white-space:nowrap;translate:0 0}.TagButton .Icon{position:relative;display:flex;min-height:1.6rem;width:100%;aspect-ratio:1/1;object-fit:contain}.button{font-weight:600;line-height:normal;margin:0;outline:none;text-align:center;text-decoration:none;transition:all .3s ease-in-out;box-shadow:0 0 4px 4px #d9d9d9;outline:1px solid transparent;filter:saturate(0)}.button:hover{translate:0 -2px}.button:hover:not(.InActive,.IsActive){box-shadow:0 0 3px 3px var(--ColorButtonShadow)}.button:active{translate:0}.button.IsActive,.button:active.InActive{box-shadow:0 0 3px 3px var(--ColorButtonShadow);background-color:var(--ColorButtonActiveBackground);outline-color:var(--ColorActiveShadowBorder);filter:saturate(1)}.button.Close{aspect-ratio:1/1;translate:0;scale:100%;filter:invert(1);opacity:1}.button.Close.InActive{opacity:0;pointer-events:none}.button.Close:after,.button.Close:before{display:block;content:"";height:100%;width:7px;position:absolute;background-color:#000;scale:25%;rotate:45deg}.button.Close:after{rotate:-45deg}.flex{display:flex;align-items:center;justify-content:center}.gap-10{gap:10px}.PageWrapper>:not(pre){text-align:center;margin:0 auto}#CardSection{align-items:flex-start;padding-top:60px}#CardSection,#Navbar{display:flex;justify-content:center}#Navbar{align-items:center;background-color:var(--ColorBG);gap:40px;height:var(--NavBarHeight);position:relative;z-index:10}.StackSection{padding-bottom:20px;position:relative;flex-wrap:wrap}.CodeExampleSection{padding:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.CodeWrapper{background-color:#24282d;padding-block:20px;width:100%;max-width:650px;height:auto;overflow:hidden;border-radius:15px;cursor:pointer;flex-shrink:0}.CodeWrapper.InActive{filter:saturate(0)}.CodeWrapper.IsActive{filter:saturate(1);box-shadow:0 0 10px 10px var(--HighlightColor)}.CodeOptions{padding-inline:30px;padding-bottom:15px;border-bottom:1px solid #575757;display:grid;grid-template-columns:repeat(3,1fr)}.CodeOptions>*{display:flex}.CodeTheme{height:100%;max-height:1em;justify-content:center;align-items:center;position:relative;z-index:9}.CodeTheme,.CodeTheme ul{display:flex;flex-direction:column}.CodeTheme ul{z-index:inherit;position:absolute;overflow:scroll;top:100%;left:0;height:0;background-color:#282828;color:#fff;transition:all .2s ease-in-out;transform:translateY(10px);border-radius:5px;padding-inline:10px;gap:.51em}.CodeTheme ul span{min-height:1em}.CodeCopy{position:relative;display:flex;align-items:center;justify-content:flex-end}.CodeCopy img,.CodeCopy svg{aspect-ratio:1/1;height:1em}pre{height:60vh;width:100%;max-height:100%;overflow:scroll;padding:20px;position:relative;text-align:left}pre *{font-size:1.8rem!important}pre li{list-style:decimal;list-style:none;margin-left:-1rem}pre li:before{content:counter(list-item) "  "}pre .Line-Index{position:absolute;left:0;color:#575757!important}