.react-component-container{width:min(1200px,94%);color:var(--text-h);margin:0 auto;padding:48px 24px 72px}.react-component-header{background:linear-gradient(135deg,#aa3bff14 0%,#3849d20f 100%);border:1px solid #aa3bff26;border-radius:40px;margin-bottom:48px;padding:0 20px 26px;position:relative;overflow:hidden}.react-component-header:before{content:"";background:radial-gradient(circle at 0 0,#aa3bff26,#0000 60%);border-radius:50%;width:350px;height:350px;position:absolute;inset:-50% -20% auto auto}.react-component-header:after{content:"";background:radial-gradient(circle at 100% 100%,#3849d21a,#0000 65%);border-radius:50%;width:280px;height:280px;position:absolute;bottom:-60px;right:-80px}.react-component-header__content{z-index:1;text-align:center;position:relative}.react-component-eyebrow{letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-size:.78rem;font-weight:700;display:inline-block}.react-component-title{background:linear-gradient(135deg, var(--text-h) 0%, var(--accent) 100%);-webkit-background-clip:text;background-clip:text;margin:0 0 16px;font-size:48px;font-weight:700;line-height:1.1}.react-component-subtitle{color:var(--text);max-width:600px;margin:auto;font-size:18px;line-height:1.6}.react-component-content{flex-direction:column;gap:36px;display:flex}.react-section{background:linear-gradient(#fffffffa,#f4f0fff0);border:1px solid #aa3bff24;border-radius:32px;padding:40px 44px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.react-section:before{content:"";background:radial-gradient(circle at 0 0,#aa3bff14,#0000 55%);border-radius:50%;width:280px;height:280px;position:absolute;inset:-40% -20% auto auto}.react-section:after{content:"";background:radial-gradient(circle at 100% 100%,#3849d214,#0000 60%);border-radius:50%;width:220px;height:220px;position:absolute;bottom:-40px;right:-60px}.react-section:hover{border-color:#aa3bff3d;box-shadow:0 20px 60px #aa3bff14}--highlight.react-section{background:linear-gradient(135deg,#aa3bff1f 0%,#3849d214 100%);border-color:#aa3bff33}--highlight.react-section:before{background:radial-gradient(circle at 0 0,#aa3bff26,#0000 55%)}.react-section-header{z-index:1;align-items:center;gap:16px;margin-bottom:24px;display:flex;position:relative}.react-section-icon{background:#aa3bff1a;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:28px;display:flex}.react-section-title{color:var(--text-h);margin:0;font-size:24px;font-weight:700;line-height:1.2}.react-section-text{z-index:1;color:var(--text);margin:0;font-size:16px;line-height:1.7;position:relative}--large.react-section-text{font-size:18px;font-weight:500;line-height:1.75}.react-features-grid{z-index:1;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin:0;padding:0;list-style:none;display:grid;position:relative}.react-feature-item{background:#ffffffb3;border:1px solid #aa3bff1f;border-radius:16px;padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1)}.react-feature-item:hover{background:#fffffff2;border-color:#aa3bff3d;transform:translateY(-4px);box-shadow:0 12px 32px #aa3bff1f}.react-feature-item h3{color:var(--text-h);margin:16px 0 8px;font-size:16px;font-weight:700}.react-feature-item p{color:var(--text);margin:0;font-size:14px;line-height:1.6}.react-feature-badge{background:linear-gradient(135deg, var(--accent), #3849d2cc);color:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;font-weight:700;display:flex}.react-disadvantages-grid{z-index:1;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid;position:relative}.react-disadvantage-card{background:#fff9;border:1px solid #ff8c8c33;border-radius:16px;padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1)}.react-disadvantage-card:hover{background:#ffffffe6;border-color:#ff8c8c66;box-shadow:0 8px 24px #ff8c8c14}.react-disadvantage-card h3{color:var(--text-h);margin:0 0 8px;font-size:16px;font-weight:700}.react-disadvantage-card p{color:var(--text);margin:0;font-size:14px;line-height:1.6}.react-diagram-wrapper{z-index:1;background:#fff9;border:1px solid #aa3bff1f;border-radius:20px;padding:20px;transition:all .3s;position:relative;overflow:hidden}.react-diagram-wrapper:hover{border-color:#aa3bff3d;box-shadow:inset 0 0 20px #aa3bff0f}.react-diagram{border-radius:12px;width:100%;height:auto;display:block}.react-code-wrapper{z-index:1;background:var(--code-bg);border:1px solid #aa3bff1f;border-radius:16px;transition:all .3s;position:relative;overflow:hidden}.react-code-wrapper:hover{border-color:#aa3bff3d;box-shadow:0 8px 24px #aa3bff14}.react-code-block{font-family:var(--mono);color:var(--text-h);background:0 0;margin:0;padding:24px;font-size:14px;line-height:1.6;overflow-x:auto}.react-code-block code{font-family:var(--mono);color:var(--text-h)}.react-code-block::-webkit-scrollbar{height:8px}.react-code-block::-webkit-scrollbar-track{background:0 0}.react-code-block::-webkit-scrollbar-thumb{background:#aa3bff33;border-radius:4px}.react-code-block::-webkit-scrollbar-thumb:hover{background:#aa3bff66}
.angular-component-container{width:min(1200px,94%);color:var(--text-h);margin:0 auto;padding:10px}.angular-component-header{background:linear-gradient(135deg,#aa3bff14 0%,#3849d20f 100%);border:1px solid #aa3bff26;border-radius:40px;margin-bottom:48px;padding:0 20px 26px;position:relative;overflow:hidden}.angular-component-header:before{content:"";background:radial-gradient(circle at 0 0,#aa3bff26,#0000 60%);border-radius:50%;width:350px;height:350px;position:absolute;inset:-50% -20% auto auto}.angular-component-header:after{content:"";background:radial-gradient(circle at 100% 100%,#3849d21a,#0000 65%);border-radius:50%;width:280px;height:280px;position:absolute;bottom:-60px;right:-80px}.angular-component-header__content{z-index:1;text-align:center;position:relative}.angular-component-eyebrow{letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-size:.78rem;font-weight:700;display:inline-block}.angular-component-title{background:linear-gradient(135deg, var(--text-h) 0%, var(--accent) 100%);-webkit-background-clip:text;background-clip:text;margin:0 0 16px;font-size:48px;font-weight:700;line-height:1.1}.angular-component-subtitle{color:var(--text);max-width:600px;margin:auto;font-size:18px;line-height:1.6}.angular-component-content{flex-direction:column;gap:36px;display:flex}.angular-section{background:linear-gradient(#fffffffa,#f4f0fff0);border:1px solid #aa3bff24;border-radius:32px;padding:40px 44px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.angular-section:before{content:"";background:radial-gradient(circle at 0 0,#aa3bff14,#0000 55%);border-radius:50%;width:280px;height:280px;position:absolute;inset:-40% -20% auto auto}.angular-section:after{content:"";background:radial-gradient(circle at 100% 100%,#3849d214,#0000 60%);border-radius:50%;width:220px;height:220px;position:absolute;bottom:-40px;right:-60px}.angular-section:hover{border-color:#aa3bff3d;box-shadow:0 20px 60px #aa3bff14}--highlight.angular-section{background:linear-gradient(135deg,#aa3bff1f 0%,#3849d214 100%);border-color:#aa3bff33}--highlight.angular-section:before{background:radial-gradient(circle at 0 0,#aa3bff26,#0000 55%)}.angular-section-header{z-index:1;align-items:center;gap:16px;margin-bottom:24px;display:flex;position:relative}.angular-section-icon{background:#aa3bff1a;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:28px;display:flex}.angular-section-title{color:var(--text-h);margin:0;font-size:24px;font-weight:700;line-height:1.2}.angular-section-text{z-index:1;color:var(--text);margin:0;font-size:16px;line-height:1.7;position:relative}--large.angular-section-text{font-size:18px;font-weight:500;line-height:1.75}.angular-features-grid{z-index:1;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin:0;padding:0;list-style:none;display:grid;position:relative}.angular-feature-item{background:#ffffffb3;border:1px solid #aa3bff1f;border-radius:16px;padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1)}.angular-feature-item:hover{background:#fffffff2;border-color:#aa3bff3d;transform:translateY(-4px);box-shadow:0 12px 32px #aa3bff1f}.angular-feature-item h3{color:var(--text-h);margin:16px 0 8px;font-size:16px;font-weight:700}.angular-feature-item p{color:var(--text);margin:0;font-size:14px;line-height:1.6}.angular-feature-badge{background:linear-gradient(135deg, var(--accent), #3849d2cc);color:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;font-weight:700;display:flex}.angular-disadvantages-grid{z-index:1;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid;position:relative}.angular-disadvantage-card{background:#fff9;border:1px solid #ff8c8c33;border-radius:16px;padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1)}.angular-disadvantage-card:hover{background:#ffffffe6;border-color:#ff8c8c66;box-shadow:0 8px 24px #ff8c8c14}.angular-disadvantage-card h3{color:var(--text-h);margin:0 0 8px;font-size:16px;font-weight:700}.angular-disadvantage-card p{color:var(--text);margin:0;font-size:14px;line-height:1.6}.angular-diagram-wrapper{z-index:1;background:#fff9;border:1px solid #aa3bff1f;border-radius:20px;padding:20px;transition:all .3s;position:relative;overflow:hidden}.angular-diagram-wrapper:hover{border-color:#aa3bff3d;box-shadow:inset 0 0 20px #aa3bff0f}.angular-diagram{border-radius:12px;width:100%;height:auto;display:block}.angular-code-wrapper{z-index:1;background:var(--code-bg);border:1px solid #aa3bff1f;border-radius:16px;transition:all .3s;position:relative;overflow:hidden}.angular-code-wrapper:hover{border-color:#aa3bff3d;box-shadow:0 8px 24px #aa3bff14}.angular-code-block{font-family:var(--mono);color:var(--text-h);background:0 0;margin:0;padding:24px;font-size:14px;line-height:1.6;overflow-x:auto}.angular-code-block code{font-family:var(--mono);color:var(--text-h)}.angular-code-block::-webkit-scrollbar{height:8px}.angular-code-block::-webkit-scrollbar-track{background:0 0}.angular-code-block::-webkit-scrollbar-thumb{background:#aa3bff33;border-radius:4px}.angular-code-block::-webkit-scrollbar-thumb:hover{background:#aa3bff66}
.vue-component-container{color:#1f3f25;width:min(1200px,94%);margin:0 auto;padding:48px 24px 72px}.vue-component-header{background:linear-gradient(135deg,#42b8831a,#5ed6a00a);border:1px solid #42b88333;border-radius:36px;margin-bottom:40px;padding:20px 20px 26px;position:relative;overflow:hidden}.vue-component-header:before{content:"";background:radial-gradient(circle at 0 0,#42b8832e,#0000 55%);border-radius:50%;width:320px;height:320px;position:absolute;inset:-40% auto auto -20%}.vue-component-header:after{content:"";background:radial-gradient(circle at 100% 100%,#32a87b24,#0000 55%);border-radius:50%;width:260px;height:260px;position:absolute;bottom:-60px;right:-60px}.vue-component-header__content{z-index:1;text-align:center;position:relative}.vue-component-eyebrow{letter-spacing:.24em;text-transform:uppercase;color:#2b7f56;margin-bottom:14px;font-size:.8rem;font-weight:700;display:inline-block}.vue-component-title{background:linear-gradient(135deg,#164f2d 0%,#42b883 100%);-webkit-background-clip:text;margin:0 0 16px;font-size:clamp(2.4rem,4vw,4rem);font-weight:800;line-height:1.05}.vue-component-subtitle{color:#3d5e4b;max-width:680px;margin:auto;font-size:1rem;line-height:1.8}.vue-component-content{flex-direction:column;gap:32px;display:flex}.vue-section{background:linear-gradient(#fffffffa,#ecfaf0f2);border:1px solid #42b88324;border-radius:28px;padding:36px 40px;transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden}.vue-section:before{content:"";background:radial-gradient(circle at 0 0,#42b88314,#0000 55%);border-radius:50%;width:260px;height:260px;position:absolute;inset:-35% auto auto -15%}.vue-section:after{content:"";background:radial-gradient(circle at 100% 100%,#5ed6a014,#0000 60%);border-radius:50%;width:190px;height:190px;position:absolute;bottom:-35px;right:-40px}.vue-section:hover{border-color:#42b8833d;transform:translateY(-2px);box-shadow:0 24px 60px #42b8831a}.vue-section--highlight{background:linear-gradient(135deg,#42b88324,#5ed6a014);border-color:#42b88333}.vue-section-header{z-index:1;align-items:center;gap:16px;margin-bottom:24px;display:flex;position:relative}.vue-section-icon{background:#42b8831f;border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.25rem;display:inline-flex}.vue-section-title{color:#154730;margin:0;font-size:1.6rem;font-weight:700}.vue-section-text{color:#3b5c4a;z-index:1;margin:0;font-size:1rem;line-height:1.75;position:relative}.vue-section-text--large{font-size:1.05rem;font-weight:500}.vue-features-grid{z-index:1;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:0;padding:0;list-style:none;display:grid;position:relative}.vue-feature-item{background:#ffffffd1;border:1px solid #42b88324;border-radius:22px;padding:24px;transition:transform .3s,border-color .3s,background .3s;box-shadow:0 10px 24px #42b8830d}.vue-feature-item:hover{background:#fffffff2;border-color:#42b8833d;transform:translateY(-4px)}.vue-feature-badge{color:#fff;background:#42b883;border-radius:12px;place-items:center;width:36px;height:36px;margin-bottom:18px;font-weight:700;display:grid}.vue-feature-item h3{color:#1f3f25;margin:0 0 10px;font-size:1.05rem}.vue-feature-item p{color:#4a6a53;margin:0;line-height:1.65}.vue-disadvantages-grid{z-index:1;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;display:grid;position:relative}.vue-disadvantage-card{background:#ffffffe6;border:1px solid #42b8831a;border-radius:20px;padding:22px}.vue-disadvantage-card h3{color:#1f3f25;margin:0 0 10px;font-size:1rem}.vue-disadvantage-card p{color:#4c6b55;margin:0;line-height:1.7}.vue-diagram-wrapper{z-index:1;place-items:center;display:grid;position:relative}.vue-diagram{border:1px solid #42b88324;border-radius:24px;box-shadow:0 18px 50px #144f2d14}.vue-code-wrapper{z-index:1;position:relative}.vue-code-block{color:#d9f8e8;background:#0f2c1d;border:1px solid #42b8832e;border-radius:22px;width:100%;padding:24px;font-family:Source Code Pro,monospace;font-size:.95rem;line-height:1.55;overflow-x:auto}.vue-code-block code{white-space:pre-wrap}
.typescript-info{width:min(1140px,94%);color:var(--text-h);background:linear-gradient(#3178c60a,#fffc);border:1px solid #3178c614;border-radius:28px;margin:2.5rem auto 4rem;padding:40px 32px 56px;box-shadow:0 24px 60px #0d2a540f}.typescript-info>h1{color:#0b3b66;background:linear-gradient(90deg,#0b3b66 0%,#3178c6 100%);-webkit-background-clip:text;height:3rem;margin:0 0 1rem;font-size:clamp(2rem,3.5vw,3rem);font-weight:800}.typescript-info section{background:#fffffff5;border:1px solid #3178c60f;border-radius:16px;margin-top:28px;padding:26px 28px}.typescript-info h2{color:#07345a;margin:0 0 .6rem;font-size:1.25rem}.typescript-info p{color:var(--text);margin:0;line-height:1.75}.typescript-info ul{gap:12px;margin:0;padding-left:0;list-style:none;display:grid}.typescript-info ul li{padding-left:1rem;position:relative}.typescript-info ul li:before{content:"";background:linear-gradient(135deg,#3178c6,#63a4ff);border-radius:50%;width:10px;height:10px;position:absolute;top:6px;left:-18px}.typescript-info .diagram{border:1px solid #3178c614;border-radius:14px;margin-top:1rem;box-shadow:0 12px 36px #3178c60f}.typescript-info pre{color:#e6f2ff;background:linear-gradient(#07162a,#0b2947);border:1px solid #6366f114;border-radius:12px;margin:0;padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:.95rem;overflow-x:auto}.typescript-info table{border-collapse:collapse;width:100%;margin-top:.75rem}.typescript-info th,.typescript-info td{border-bottom:1px solid #3178c60f;padding:.9rem 1rem}.typescript-info thead th{color:#072a46;font-weight:700}