*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:#0a0f0d;background-image:radial-gradient(circle at 20% 50%,rgba(0,66,37,.3) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(26,93,58,.2) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(0,66,37,.2) 0%,transparent 50%);min-height:100vh;color:#f0f4f2;line-height:1.6}.layout{display:flex;min-height:100vh}.navigation{position:fixed;left:0;top:0;width:280px;height:100vh;background:#0f191499;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(26,93,58,.2);padding:2rem 1.5rem;overflow-y:auto;display:flex;flex-direction:column}.nav-header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(26,93,58,.2)}.nav-header h2{font-family:Playfair Display,serif;font-size:1.5rem;margin-bottom:.5rem;color:#f0f4f2;font-weight:400}.nav-subtitle{color:#8fa99b;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.nav-section{margin-bottom:2rem}.nav-section h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#8fa99b;margin-bottom:.75rem;font-weight:600}.nav-link{display:block;padding:.75rem 1rem;color:#a8bdb2;text-decoration:none;transition:all .3s ease;margin-bottom:.25rem;position:relative;font-size:.95rem}.nav-link:hover{background:#1a5d3a1a;color:#f0f4f2}.nav-link.active{background:#1a5d3a33;color:#4ade80;border-left:2px solid #4ade80}.nav-footer{margin-top:auto;padding-top:2rem;border-top:1px solid rgba(26,93,58,.2)}.back-link{color:#8fa99b;font-size:.85rem;text-decoration:none;transition:color .3s ease}.back-link:hover{color:#f0f4f2}.main-content{flex:1;margin-left:280px;padding:2rem;max-width:1400px}.page-container{max-width:1200px}.page-header{margin-bottom:2rem}.page-header h1{font-family:Playfair Display,serif;font-size:2.5rem;margin-bottom:.5rem;color:#f0f4f2;font-weight:400}.page-description{color:#a8bdb2;font-size:1.1rem;line-height:1.6}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0}.metric-card{background:#0f191499;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(26,93,58,.2);padding:1.5rem;transition:all .3s ease}.metric-card:hover{transform:translateY(-2px);border-color:#1a5d3a80}.metric-value{font-size:2.5rem;font-weight:700;color:#4ade80;margin-bottom:.5rem;font-family:Inter,monospace}.metric-label{color:#8fa99b;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.metric-change{font-size:.9rem;margin-top:.5rem}.metric-change.positive{color:#4ade80}.metric-change.negative{color:#dc2626}.card{background:#0f191499;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(26,93,58,.2);padding:2rem;margin-bottom:2rem;transition:all .3s ease}.card:hover{border-color:#1a5d3a80}.card h2{font-family:Playfair Display,serif;color:#4ade80;margin-bottom:1rem;font-size:1.5rem;font-weight:400}.card h3{color:#f0f4f2;margin:1.5rem 0 1rem;font-size:1.1rem}.card p{color:#a8bdb2;margin-bottom:1rem}.code-block{background:#0a0a0acc;border:1px solid rgba(26,93,58,.2);padding:1.5rem;margin:1rem 0;overflow-x:auto;border-radius:4px}.code-block pre{margin:0;color:#a8bdb2;font-family:Monaco,Menlo,monospace;font-size:.9rem;line-height:1.5}.btn{padding:.75rem 1.5rem;background:#1a5d3a33;border:1px solid #1a5d3a;color:#4ade80;cursor:pointer;transition:all .3s ease;font-family:inherit;font-size:.95rem;font-weight:500}.btn:hover{background:#1a5d3a4d;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#1a5d3a,#4ade80);color:#fff;border:none}.btn-primary:hover{box-shadow:0 5px 20px #1a5d3a4d}.controls{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0}.demo-section{margin:3rem 0}.grid{display:grid;gap:1.5rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.list-container{max-height:400px;overflow-y:auto;background:#0a0a0a66;border:1px solid rgba(26,93,58,.2);padding:1rem;margin:1rem 0}.list-item{padding:.75rem;background:#0f191466;border-left:3px solid #1a5d3a;margin-bottom:.5rem;transition:all .2s ease}.list-item:hover{background:#0f191499;border-left-color:#4ade80}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin:2rem 0}.image-card{position:relative;background:#0f191499;border:1px solid rgba(26,93,58,.2);padding:.5rem;transition:all .3s ease}.image-card:hover{transform:scale(1.02);border-color:#1a5d3a80}.image-card img{width:100%;height:auto;display:block}.image-info{padding:.5rem;font-size:.85rem;color:#8fa99b}.loading-skeleton{background:linear-gradient(90deg,#1a5d3a1a,#1a5d3a33,#1a5d3a1a);background-size:200% 100%;animation:skeleton 1.5s ease-in-out infinite;height:200px;border-radius:4px}@keyframes skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.performance-chart{background:#0f191499;border:1px solid rgba(26,93,58,.2);padding:2rem;margin:2rem 0;border-radius:4px}.bundle-visualizer{background:#0a0a0acc;border:1px solid rgba(26,93,58,.2);padding:2rem;margin:2rem 0;min-height:400px;display:flex;align-items:center;justify-content:center;color:#8fa99b}.tabs{display:flex;gap:.5rem;margin-bottom:2rem;border-bottom:1px solid rgba(26,93,58,.2)}.tab{padding:.75rem 1.5rem;background:transparent;border:none;border-bottom:2px solid transparent;color:#a8bdb2;cursor:pointer;transition:all .3s ease}.tab:hover{color:#f0f4f2}.tab.active{color:#4ade80;border-bottom-color:#4ade80}.info-box{background:#1a5d3a1a;border:1px solid rgba(26,93,58,.3);border-left:3px solid #4ade80;padding:1rem;margin:1rem 0}.info-box strong{color:#4ade80}.warning-box{background:#f0c6741a;border:1px solid rgba(240,198,116,.3);border-left:3px solid #f0c674;padding:1rem;margin:1rem 0}.warning-box strong{color:#f0c674}@media (max-width: 768px){.layout{flex-direction:column}.navigation{position:static;width:100%;height:auto;border-right:none;border-bottom:1px solid rgba(26,93,58,.2)}.main-content{margin-left:0;padding:1rem}.page-header h1{font-size:2rem}.grid-2,.grid-3{grid-template-columns:1fr}}