:root{--color-primary: #1e293b;--color-card-bg: #334155;--color-text-primary: #e2e8f0;--color-text-secondary: #94a3b8;--color-accent: #38bdf8;--color-main-btn: #14b8a6}:host,body{margin:0;padding:0}app-root{display:block;font-family:Inter,sans-serif;background-color:var(--color-primary);color:var(--color-text-primary)}.app-container{max-width:1200px;margin:0 auto;padding:32px 16px}@media (min-width: 768px){.app-container{padding:48px 24px}}.grid-layout{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width: 768px){.grid-layout{grid-template-columns:repeat(2,1fr)}.grid-col-2{grid-column:span 2 / span 2}}.layout-compare{grid-template-columns:1fr 1fr}.flex-row{display:flex;gap:.5rem}.flex-wrap-row{display:flex;flex-wrap:wrap;gap:1rem}.space-y>*+*{margin-top:.75rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mb-2{margin-bottom:.5rem}.text-center{text-align:center}.font-semibold{font-weight:600}.text-slate-500{color:var(--color-text-secondary)}.accent-text-dark{color:var(--color-accent)}header{text-align:center;margin-bottom:2.5rem}.header-title{font-size:2.25rem;font-weight:700;color:#f8fafc}@media (min-width: 768px){.header-title{font-size:3rem}}.header-subtitle{font-size:1.125rem;color:var(--color-text-secondary);margin-top:.5rem}.nav-container{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.tab-btn{padding:.5rem 1rem;font-size:1rem;font-weight:600;border:2px solid transparent;border-radius:9999px;transition:all .3s ease;background-color:transparent;color:#cbd5e1;cursor:pointer;white-space:nowrap}.tab-btn:hover{background-color:#0d9488;color:#fff}.tab-btn.active{background-color:var(--color-main-btn);color:var(--color-primary);border-color:var(--color-main-btn)}@media (max-width: 767px){.tab-btn{font-size:.875rem;padding:.5rem .75rem}}.section-header-group{text-align:center;margin-bottom:2rem}.section-header{font-size:1.5rem;font-weight:700;color:#f8fafc}.section-subtitle{color:var(--color-text-secondary);margin-top:.25rem}.content-section{display:none}.content-section.active{display:block}.card{background-color:var(--color-card-bg);padding:1.5rem;border-radius:.5rem;box-shadow:0 10px 15px -3px #00000080,0 4px 6px -4px #0003}.card-title{font-weight:700;font-size:1.125rem;margin-bottom:.5rem}.card-body{color:#cbd5e1;margin-bottom:1rem}.accent-text{color:var(--color-accent)}.color-swatch{width:40px;height:40px;border-radius:9999px;box-shadow:inset 0 0 0 1px #fff3}.swatch-slate-800{background-color:#1e293b}.swatch-slate-100{background-color:#f1f5f9}.swatch-teal-500{background-color:#14b8a6}.swatch-amber-400{background-color:#f9b846}.type-h1{font-size:1.5rem;font-weight:700;color:#f8fafc}.type-h2{font-size:1.25rem;font-weight:600;color:#cbd5e1}.skill-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.875rem;font-weight:500;margin:.25rem;white-space:nowrap}.skill-display{background-color:#1f2937;padding:1rem;border-radius:.375rem;min-height:100px}.list-style,.list-style-inner{list-style:disc;padding-left:20px;color:var(--color-text-primary);line-height:1.5}.bg-green-200{background-color:#065f46}.text-green-800{color:#a7f3d0}.bg-red-200{background-color:#991b1b}.text-red-800{color:#fca5a5}.bg-purple-200{background-color:#6b21a8}.text-purple-800{color:#e9d5ff}.bg-orange-200{background-color:#9a3412}.text-orange-800{color:#fed7aa}.bg-blue-200{background-color:#1e40af}.text-blue-800{color:#93c5fd}.before-box{border:2px solid #b91c1c;padding:4px;background-color:#450a0a;color:#fecaca}.before-item{background-color:#7f1d1d;padding:4px;margin-top:4px}.before-item:first-child{margin-top:0}.after-box{border:2px solid #065f46;padding:16px;background-color:#0c4a6e;border-radius:4px;color:#bae6fd}.after-item{background-color:#0369a1;padding:12px;margin-top:12px;border-radius:4px}.after-item:first-child{margin-top:0}.main-btn{padding:.625rem 1.25rem;background-color:var(--color-main-btn);color:var(--color-primary);font-weight:600;border-radius:.5rem;box-shadow:0 10px 15px -3px #00000080,0 4px 6px -4px #0003;transition:all .3s ease;cursor:pointer;border:none;text-align:center}.main-btn:hover{background-color:#0d9488}.secondary-btn{padding:.625rem 1.25rem;background-color:#475569;color:#fff;font-weight:600;border-radius:.5rem;box-shadow:0 10px 15px -3px #00000080,0 4px 6px -4px #0003;transition:all .3s ease;cursor:pointer;border:none;text-align:center}.secondary-btn:hover{background-color:#334155}.animated-btn{padding:.75rem 1.5rem;background-color:var(--color-main-btn);color:var(--color-primary);font-weight:600;border-radius:.5rem;box-shadow:0 10px 15px -3px #00000080,0 4px 6px -4px #0003;transition:all .3s ease-in-out;cursor:pointer;border:none;transform:scale(1)}.animated-btn:hover{background-color:#0d9488;transform:scale(1.05);box-shadow:0 20px 25px -5px #0009,0 8px 10px -6px #0000004d}.animated-btn:active{transform:scale(.95)}.case-study-box{background-color:#1f2937;border:1px solid #475569;padding:1rem;border-radius:.5rem}.case-study-title{font-weight:700;color:#f1f5f9}.label-width{display:inline-block;width:100px}.chart-container{position:relative;width:100%;max-width:400px;margin-left:auto;margin-right:auto;height:250px;max-height:300px}