.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}:root{font-family:Fredoka,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.body{background:linear-gradient(90deg,#fdf4d0,#ede0b8)}#basic-background{padding-left:calc(var(--largest-padding)*4);padding-right:calc(var(--largest-padding)*4);padding-bottom:var(--largest-padding);box-sizing:border-box;min-height:100vh;margin:0;overflow:clip}h1{font-size:clamp(2.5rem,5vw,4rem)}:root{--primary-bg:#fff4cc;--secondary-bg:#ede0b8;--card-bg:#fdf6e0;--tertiary-bg:#f7ebc4;--fourth-bg:#e6d28f;--card-secondary-top-bg:#ead89c;--card-top-bg:#f0d878;--button-primary:#b89b2e;--button-primary-hover:#9e8a25;--primary-text-color:#1f2937;--muted-text-color:#9ca3af;--button-secondary-bg:transparent;--button-secondary-border:#e5e7eb;--highlight:#f0d878;--deep-highlight:#e8b84b;--highlight-thematic:#cdb59d;--bg:#0f172a;--dark:black;--light:#fafaf8;--light-2:#f8f8f6;--light-darker:#f0f0f0;--standard-padding:2vh;--largest-padding:min(8vh, 5vw);--larger-padding:4vh;--smaller-padding:1vh;--mini-padding:.5vh;--standard-font-size:clamp(.6rem, 1.4vw, 1.8vh);--standard-text-color:"black";--shadow-card:0 8px 12px #0003;--light-shadow-card-bottom:0 18px 24px -18px #00000059;font-size:var(--standard-font-size)}.big-title{color:var(--primary-text-color);text-shadow:0 1px 1px #0003,0 2px 4px #00000026;font-size:clamp(1.6rem,4vw,8vh)}.sub-title{color:var(--primary-text-color);font-size:clamp(.8rem,2vw,4vh)}.highlighted-sub-title{color:var(--deep-highlight);font-weight:500}.smaller-title{font-size:clamp(1.2rem,3vw,6vh)}.smaller-sub-title{font-size:clamp(.6rem,1.5vw,3vh)}.button{background-color:var(--light);cursor:pointer;border-radius:var(--mini-padding);border:2px solid var(--primary-text-color)}.button:hover{background-color:color-mix(in srgb, var(--primary-text-color), var(--light) 50%)}.button.selected{background-color:var(--primary-text-color);color:var(--light);transition:background .3s}.hover-fade:hover{opacity:.87;transition:background .3s}*{font-family:inherit;font-size:inherit;color:var(--primary-text-color);box-sizing:border-box}.box-shadow{box-shadow:var(--shadow-card)}.hover-glow-scale{transition:scale .7s}.hover-glow-scale:hover{transition:scale .7s;animation:2s ease-in-out infinite glow;scale:1.02}@keyframes glow{0%,to{box-shadow:0 0 var(--mini-padding) 0px color-mix(in srgb, var(--deep-highlight) 20%, transparent)}50%{box-shadow:0 0 0px var(--smaller-padding) color-mix(in srgb, var(--deep-highlight) 80%, transparent)}}.lowkey-button{background-color:var(--card-bg);border-radius:var(--mini-padding);cursor:pointer}.lowkey-button:hover{background-color:var(--dark);color:var(--light);border-radius:var(--mini-padding)}.emboldened{font-weight:500}.scroll-container{scrollbar-width:none;-ms-overflow-style:none;overflow-y:scroll}.scroll-container::-webkit-scrollbar{display:none}.collage-container{pointer-events:none;background:linear-gradient(to bottom, var(--light) 28%, var(--light-2) 35%);z-index:-1;position:fixed;inset:0;overflow:hidden}.lesson-section{background-color:var(--light);border-radius:var(--mini-padding);padding:var(--standard-padding);box-shadow:var(--shadow-card)}.lesson-section-spacer{height:1vh}.lesson-paragraph{margin:0}