:root{--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--bg-card:#fff;--bg-overlay:#0000001a;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#64748b;--text-muted:#94a3b8;--text-white:#fff;--border-primary:#e2e8f0;--border-secondary:#cbd5e1;--slate-950:#020617;--slate-900:#0f172a;--slate-800:#1e293b;--slate-700:#334155;--slate-600:#475569;--slate-500:#64748b;--slate-400:#94a3b8;--slate-300:#cbd5e1;--slate-200:#e2e8f0;--slate-100:#f1f5f9;--slate-50:#f8fafc;--blue-950:#172554;--blue-900:#1e3a8a;--blue-800:#1e40af;--blue-700:#1d4ed8;--blue-600:#2563eb;--blue-500:#3b82f6;--blue-400:#60a5fa;--blue-300:#93c5fd;--blue-200:#bfdbfe;--blue-100:#dbeafe;--blue-50:#eff6ff;--sky-950:#082f49;--sky-900:#0c4a6e;--sky-800:#075985;--sky-700:#0369a1;--sky-600:#0284c7;--sky-500:#0ea5e9;--sky-400:#38bdf8;--sky-300:#7dd3fc;--sky-200:#bae6fd;--sky-100:#e0f2fe;--sky-50:#f0f9ff;--green-950:#052e16;--green-900:#14532d;--green-800:#166534;--green-700:#15803d;--green-600:#16a34a;--green-500:#22c55e;--green-400:#4ade80;--green-300:#86efac;--green-200:#bbf7d0;--green-100:#dcfce7;--green-50:#f0fdf4;--red-950:#450a0a;--red-900:#7f1d1d;--red-800:#991b1b;--red-700:#b91c1c;--red-600:#dc2626;--red-500:#ef4444;--red-400:#f87171;--red-300:#fca5a5;--red-200:#fecaca;--red-100:#fee2e2;--red-50:#fef2f2;--yellow-950:#422006;--yellow-900:#713f12;--yellow-800:#854d0e;--yellow-700:#a16207;--yellow-600:#ca8a04;--yellow-500:#eab308;--yellow-400:#facc15;--yellow-300:#fde047;--yellow-200:#fef08a;--yellow-100:#fef9c3;--yellow-50:#fefce8;--gray-950:#030712;--gray-900:#111827;--gray-800:#1f2937;--gray-700:#374151;--gray-600:#4b5563;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;--modal-bg-dark:#1e1e1e80;--modal-border-dark:#ffffff14;--modal-text-light:#f5f5f5;--modal-overlay:#00000059}[data-theme=dark]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-card:#1e293b;--bg-overlay:#ffffff1a;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-tertiary:#94a3b8;--text-muted:#64748b;--border-primary:#334155;--border-secondary:#475569}[data-theme=light]{--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--bg-card:#fff;--bg-overlay:#0000001a;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#64748b;--text-muted:#94a3b8;--border-primary:#e2e8f0;--border-secondary:#cbd5e1}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{background:linear-gradient(135deg, var(--slate-950) 0%, var(--slate-900) 100%);color:var(--slate-50);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:2rem}.header{text-align:center;border-bottom:2px solid var(--blue-600);margin-bottom:3rem;padding:2rem 0}.header h1{color:var(--blue-400);letter-spacing:-.5px;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.header p{color:var(--slate-400);font-size:1.125rem;font-weight:300}.content{margin:2rem 0}.cards-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin:0;display:grid}.card{background:linear-gradient(135deg, var(--slate-800) 0%, var(--slate-900) 100%);border:1px solid var(--slate-700);border-radius:12px;flex-direction:column;height:100%;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden;box-shadow:0 10px 30px #0000004d}.card:hover{border-color:var(--blue-600);transform:translateY(-8px);box-shadow:0 20px 40px #2563eb33}.card-header{background:linear-gradient(90deg, var(--blue-700) 0%, var(--blue-600) 100%);border-bottom:2px solid var(--blue-500);padding:1.5rem}.card-header h2{color:#fff;margin:0;font-size:1.5rem;font-weight:600}.card-image{background:var(--slate-900);width:100%;margin:0;padding:1rem}.card-image img{border-radius:8px;width:100%;height:auto;display:block}.card-body{flex-direction:column;flex-grow:1;padding:1.5rem;display:flex}.card-body h3{color:var(--blue-300);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;font-size:1rem;font-weight:600}.code-block{background:var(--slate-950);border:1px solid var(--slate-700);border-radius:8px;flex-grow:1;overflow:hidden}.code-block pre{margin:0;padding:1rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.6;overflow-x:auto}.code-block code{color:var(--blue-300);white-space:pre;word-break:break-word;word-wrap:break-word;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--slate-900)}::-webkit-scrollbar-thumb{background:var(--blue-600);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--blue-500)}@media (width<=768px){.container{padding:1rem}.header h1{font-size:1.75rem}.header p{font-size:1rem}.cards-grid{grid-template-columns:1fr;gap:1.5rem}.card-body{padding:1rem}.code-block pre{padding:.75rem;font-size:.8rem}}.modal{z-index:1000;width:100%;height:100%;animation:.3s ease-in-out fadeIn;display:none;position:fixed;top:0;left:0}.modal.active{justify-content:center;align-items:center;display:flex}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;z-index:-1;background:#000c;width:100%;height:100%;position:absolute;top:0;left:0}.modal-content{background:var(--slate-800);border:1px solid var(--slate-700);border-radius:16px;max-width:90vw;max-height:90vh;animation:.3s cubic-bezier(.4,0,.2,1) slideIn;position:relative;overflow:hidden;box-shadow:0 25px 50px #00000080}.modal-image{object-fit:contain;width:100%;height:auto;max-height:85vh;display:block}.modal-close{color:#fff;cursor:pointer;z-index:1001;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:2rem;line-height:1;transition:all .2s;display:flex;position:absolute;top:1rem;right:1rem}.modal-close:hover{background:#2563ebcc;transform:scale(1.1)}.card-image img{cursor:pointer;transition:transform .2s}.card-image img:hover{transform:scale(1.05)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}