a:where(.astro-zaxs7rf4).logo-header{text-decoration:none;position:relative}.synthwave-text:where(.astro-zaxs7rf4){--header-font:Jost, sans-serif;--synth-grad-1:#125da0;--synth-grad-2:#031e36;--synth-grad-3:#125da0;--synth-grad-4:#fff;--synth-grad-5:#031e36;--synth-grad-6:#2f448e;--synth-grad-7:#da1d5f;--synth-grad-8:#fff;--synthwave-gradient:linear-gradient(var(--synth-grad-1) 13% 15%, var(--synth-grad-2) 20% 27%, var(--synth-grad-3) 33% 35%, var(--synth-grad-4) 40% 42%, var(--synth-grad-5) 42% 43%, var(--synth-grad-6) 44% 47%, var(--synth-grad-7) 60% 63%, var(--synth-grad-8) 72%);font-family:var(--header-font);text-transform:uppercase;color:#fff;background:var(--synthwave-gradient);-webkit-text-fill-color:transparent;filter:drop-shadow(2px 0 #fff)drop-shadow(-2px 0 #fff)drop-shadow(0 2px #fff)drop-shadow(0 -2px #fff)drop-shadow(0 0 5px #04293e)drop-shadow(0 0 8px #1783c1);font-weight:800;font-size:var(--font-size,clamp(1rem, 15vw, 9rem));z-index:10;-webkit-background-clip:text;margin:0;position:relative}@media (max-width:900px){.synthwave-text:where(.astro-zaxs7rf4){filter:drop-shadow(1px 0 #fff)drop-shadow(-1px 0 #fff)drop-shadow(0 1px #fff)drop-shadow(0 -1px #fff)drop-shadow(0 0 5px #04293e)drop-shadow(0 0 8px #1783c1)}}.triangle:where(.astro-zaxs7rf4){fill:none;stroke:#fff;stroke-width:4px;height:300px;filter:var(--blue-glow);pointer-events:none;position:absolute;top:0;left:85px;transform:translateY(-10%)}@media (max-width:1000px){.wrapper:where(.astro-zaxs7rf4).column{width:auto}.triangle:where(.astro-zaxs7rf4){display:none}}@media (max-width:1300px){.start-list:where(.astro-zaxs7rf4).wrapper .category:where(.astro-zaxs7rf4).roadmap{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));justify-items:start}div:where(.astro-zaxs7rf4):empty{display:none}.line:where(.astro-zaxs7rf4){display:none}}@media (max-width:1000px){.start-list:where(.astro-zaxs7rf4).wrapper .category:where(.astro-zaxs7rf4).roadmap{grid-template-columns:1fr}.start-list:where(.astro-zaxs7rf4).wrapper .topic-card:where(.astro-zaxs7rf4){position:relative}}@media (min-width:1250px){.page fieldset div:empty{width:250px}}.page .category{color:#fff;border:0;border-top:1px solid #555;font-family:Jost,sans-serif}.page .category legend{text-transform:uppercase;padding:0 1rem}.page .topic-card{max-height:375px}.page .topic-card .bg-logo{transition:opacity .4s}.page .topic-card:hover .bg-logo{opacity:0}.page .topic-card p{margin-bottom:1.25rem}.page legend{z-index:25;background:#111;font-size:1.25rem;position:sticky;top:2rem}.page .alternatives{perspective:500px;position:relative}.page .alternatives>.topic-card{transition:transform .25s;display:none;position:absolute}.page .alternatives>.topic-card.active{display:grid}.page .deps{--size:24px;opacity:.5;justify-content:end;align-items:center;gap:0 6px;height:34px;padding-bottom:1.5rem;display:flex}.page .deps svg.s{width:var(--size);height:var(--size)}.page fieldset.category.level-2{border-top:1px dashed #555}:scope .choose-framework{justify-content:center;margin:auto auto 2rem;display:flex}:scope .choose-framework input[type=radio]{display:none}:scope .choose-framework input[type=radio]+svg{cursor:pointer;background:0 0;border:2px solid #0000;width:42px;height:42px;margin:0 .25rem;padding:.5rem}:scope .choose-framework input[type=radio]:checked+svg{background:#222;border:2px solid #666}:scope .choose-framework:has(input[value=react]:checked)~.roadmap:-webkit-any(.angular,.vuejs,.svelte){display:none}:scope .choose-framework:has(input[value=react]:checked)~.roadmap:-moz-any(.angular,.vuejs,.svelte){display:none}:scope .choose-framework:has(input[value=react]:checked)~.roadmap:is(.angular,.vuejs,.svelte){display:none}:scope .choose-framework:has(input[value=vuejs]:checked)~.roadmap:-webkit-any(.angular,.react,.svelte){display:none}:scope .choose-framework:has(input[value=vuejs]:checked)~.roadmap:-moz-any(.angular,.react,.svelte){display:none}:scope .choose-framework:has(input[value=vuejs]:checked)~.roadmap:is(.angular,.react,.svelte){display:none}:scope .choose-framework:has(input[value=angular]:checked)~.roadmap:-webkit-any(.react,.vuejs,.svelte){display:none}:scope .choose-framework:has(input[value=angular]:checked)~.roadmap:-moz-any(.react,.vuejs,.svelte){display:none}:scope .choose-framework:has(input[value=angular]:checked)~.roadmap:is(.react,.vuejs,.svelte){display:none}:scope .choose-framework:has(input[value=svelte]:checked)~.roadmap:-webkit-any(.angular,.vuejs,.react){display:none}:scope .choose-framework:has(input[value=svelte]:checked)~.roadmap:-moz-any(.angular,.vuejs,.react){display:none}:scope .choose-framework:has(input[value=svelte]:checked)~.roadmap:is(.angular,.vuejs,.react){display:none}:scope .choose-framework:not(:has(input[value=vuejs]:checked))~.roadmap .vuejs:-webkit-any(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=vuejs]:checked))~.roadmap .vuejs:-moz-any(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=vuejs]:checked))~.roadmap .vuejs:is(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=react]:checked))~.roadmap .react:-webkit-any(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=react]:checked))~.roadmap .react:-moz-any(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=react]:checked))~.roadmap .react:is(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=angular]:checked))~.roadmap .angular:-webkit-any(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=angular]:checked))~.roadmap .angular:-moz-any(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=angular]:checked))~.roadmap .angular:is(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=svelte]:checked))~.roadmap .svelte:-webkit-any(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=svelte]:checked))~.roadmap .svelte:-moz-any(.alternatives,.topic-card){display:none}:scope .choose-framework:not(:has(input[value=svelte]:checked))~.roadmap .svelte:is(.alternatives,.topic-card){display:none}@keyframes line-move{0%{stroke-dashoffset:0}to{stroke-dashoffset:4px}}