.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.page-header{margin:3rem 0 4rem;position:relative}h1{font-size:var(--font-size-4xl);background:linear-gradient(90deg,var(--accent-secondary),var(--accent-primary));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;margin-bottom:.5rem}.header-accent{width:80px;height:4px;background:linear-gradient(90deg,var(--accent-secondary),var(--accent-primary));border-radius:2px}.resources-container{padding:1rem 0 4rem}.resource-search{display:flex;margin:0 auto 2rem;max-width:500px;position:relative}.search-input{width:100%;padding:.75rem 1rem .75rem 2.75rem;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:8px;color:var(--text-primary);font-size:1rem;transition:all .3s ease}.search-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--glow-primary)}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-tertiary)}.resource-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:2rem 0}.filter-button{padding:.5rem 1.25rem;background:var(--bg-tertiary);border:1px solid var(--border-primary);color:var(--text-secondary);border-radius:20px;font-size:.9rem;cursor:pointer;transition:all .3s ease}.filter-button:hover{background:linear-gradient(90deg,#06b6d41a,#3b82f61a);color:var(--text-primary);border-color:var(--accent-primary);box-shadow:0 0 10px var(--glow-primary)}.filter-button.active{background:linear-gradient(90deg,#06b6d433,#3b82f633);color:var(--accent-primary);border-color:var(--accent-primary);box-shadow:0 0 15px var(--glow-primary)}.section-title{font-size:var(--font-size-2xl);margin-bottom:1rem;color:var(--text-primary)}.section-description{font-size:var(--font-size-lg);color:var(--text-secondary);margin-bottom:2rem;max-width:800px}.resources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;margin-bottom:3rem}.resource-header{padding:1.25rem;border-bottom:1px solid var(--border-secondary);display:flex;align-items:center;gap:1rem}.resource-icon{color:var(--accent-secondary);flex-shrink:0}.resource-icon svg{width:24px;height:24px}.resource-title{font-size:var(--font-size-xl);color:var(--text-primary);margin-bottom:.25rem}.resource-description{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:.5rem;flex-grow:1}.resource-body{padding:1.25rem;flex-grow:1;display:flex;flex-direction:column}.code-preview{background:var(--bg-code);border-radius:8px;overflow:hidden;margin-top:1rem;border:1px solid var(--border-secondary);flex-grow:1;display:flex;flex-direction:column;min-height:200px}.code-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#0003;border-bottom:1px solid var(--border-secondary)}.filename{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-secondary)}.code-actions{display:flex;align-items:center;gap:.5rem}.code-action{font-size:var(--font-size-xs);color:var(--text-secondary);background:#1e293b80;padding:.25rem .5rem;border-radius:4px;cursor:pointer;transition:all .2s ease;border:none}.code-action:hover{background:#3b82f633;color:var(--accent-secondary)}.code-block{margin:0!important;padding:1rem!important;background:transparent!important;font-family:var(--font-mono)!important;font-size:var(--font-size-sm)!important;line-height:1.6!important;overflow:auto!important;color:var(--text-secondary)!important;flex-grow:1;max-height:300px}.code-block pre{height:100%;margin:0;padding:0}.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.resource-footer{padding:1rem 1.25rem;border-top:1px solid var(--border-secondary);display:flex;justify-content:space-between;align-items:center;margin-top:auto}.last-updated{font-size:var(--font-size-xs);color:var(--text-tertiary)}.resource-link{font-size:var(--font-size-sm);color:var(--accent-secondary);text-decoration:none;display:flex;align-items:center;gap:.5rem}.resource-link:hover{text-decoration:underline}@media (max-width: 768px){.resources-grid{grid-template-columns:1fr}h1{font-size:var(--font-size-3xl)}.section-title{font-size:var(--font-size-xl)}.section-description{font-size:var(--font-size-base)}}