.article-search{padding-bottom:var(--spacing-12)}.article-search__container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:var(--spacing-4);padding-right:var(--spacing-4);max-width:48rem}.article-filters{display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-bottom:var(--spacing-8)}.article-filters__dropdown{position:relative}.article-filters__button{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-sm);color:var(--color-gray-700);cursor:pointer;transition:all .2s ease}.article-filters__button:hover{border-color:var(--color-primary);color:var(--color-primary)}.article-filters__button--active{border-color:var(--color-primary);background:rgba(23,190,208,.05)}.article-filters__icon{color:var(--color-primary);margin-right:var(--spacing-2)}.article-filters__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 var(--spacing-1);background:var(--color-primary);color:var(--color-white);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full)}.article-filters__chevron{margin-left:auto;font-size:var(--font-size-xs)}.article-filters__menu{position:absolute;top:100%;left:0;margin-top:var(--spacing-1);width:12rem;background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:100}.article-filters__options{padding:var(--spacing-3);display:flex;flex-direction:column;gap:var(--spacing-2)}.article-filters__option{display:flex;align-items:center;cursor:pointer}.article-filters__checkbox{margin-right:var(--spacing-2);border-radius:var(--radius-sm);border:1px solid var(--color-gray-300);color:var(--color-primary);cursor:pointer}.article-filters__checkbox:focus{outline:2px solid var(--color-primary);outline-offset:2px}.article-filters__label{display:flex;align-items:center;font-size:var(--font-size-sm);color:var(--color-gray-600)}.article-filters__indicator{width:.5rem;height:.5rem;border-radius:var(--radius-full);margin-right:var(--spacing-2)}.article-filters__indicator--beginner{background-color:var(--color-green-500)}.article-filters__indicator--intermediate{background-color:var(--color-yellow-500)}.article-filters__indicator--advanced{background-color:var(--color-red-500)}.article-filters__platform-icon{width:1rem;margin-right:var(--spacing-2)}.article-filters__platform-icon--web{color:var(--color-blue-600)}.article-filters__platform-icon--desktop{color:var(--color-purple-600)}.article-filters__platform-icon--mobile{color:var(--color-orange-600)}.article-filters__platform-icon--android{color:var(--color-green-600)}.article-filters__platform-icon--ios{color:var(--color-gray-600)}.article-filters__platform-icon--windows{color:var(--color-cyan-600)}.article-filters__platform-icon--mac{color:var(--color-gray-600)}.article-filters__platform-icon--linux{color:var(--color-yellow-600)}.article-filters__clear{display:flex;align-items:center;padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-lg);background:rgba(0,0,0,0);cursor:pointer;transition:background .2s ease}.article-filters__clear:hover{background:rgba(23,190,208,.05)}.article-filters__clear i{margin-right:var(--spacing-2)}:root{--color-primary:#17bed0;--color-primary-dark:#15abbe;--color-primary-light:rgba(23,190,208,0.1);--color-primary-5:rgba(23,190,208,0.05);--color-primary-10:rgba(23,190,208,0.1);--color-primary-20:rgba(23,190,208,0.2);--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#3b82f6;--color-green-100:#d1fae5;--color-green-500:#10b981;--color-green-600:#059669;--color-green-700:#047857;--color-blue-100:#dbeafe;--color-blue-600:#2563eb;--color-blue-700:#1d4ed8;--color-red-100:#fee2e2;--color-red-200:#fecaca;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-yellow-500:#eab308;--color-yellow-600:#ca8a04;--color-orange-600:#ea580c;--color-cyan-600:#0891b2;--color-purple-50:#faf5ff;--color-purple-100:#f3e8ff;--color-purple-200:#e9d5ff;--color-purple-400:#c084fc;--color-purple-500:#a855f7;--color-purple-600:#9333ea;--color-purple-700:#7e22ce;--color-pink-50:#fdf2f8;--color-pink-200:#fbcfe8;--color-pink-500:#ec4899;--color-white:#ffffff;--color-black:#000000;--color-transparent:transparent;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--radius-sm:0.125rem;--radius-base:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--shadow-base:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);--z-index-dropdown:10;--z-index-sticky:20;--z-index-header:50;--z-index-modal:100;--z-index-tooltip:200}.article-grid{margin-bottom:var(--spacing-16)}.article-grid__container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:var(--spacing-4);padding-right:var(--spacing-4);max-width:80rem;position:relative}.article-grid__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-6)}@media(max-width:640px){.article-grid__header{flex-direction:column;align-items:flex-start;gap:var(--spacing-2)}}.article-grid__title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-gray-800);display:flex;align-items:center}.article-grid__title i{color:var(--color-primary);margin-right:var(--spacing-3)}.article-grid__count{font-size:var(--font-size-sm);color:var(--color-gray-500)}.article-grid__decoration{position:absolute;top:-4rem;left:-10rem;width:24rem;height:24rem;background:linear-gradient(to bottom right,rgba(167,139,250,.1),rgba(23,190,208,.1),rgba(251,207,232,.1));border-radius:var(--radius-full);filter:blur(64px);opacity:.7;pointer-events:none}.article-grid__list{position:relative;z-index:10;background:var(--color-white);border-radius:var(--radius-2xl);border:1px solid var(--color-gray-100);overflow:hidden;list-style:none;padding:0;margin:0}.article-grid__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-8) var(--spacing-4);margin-top:var(--spacing-6);gap:var(--spacing-3)}.article-grid__loading p{font-size:var(--font-size-sm);color:var(--color-gray-600);margin:0}.article-grid__spinner{width:2.5rem;height:2.5rem;border:3px solid var(--color-gray-200);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:article-grid-spin .8s linear infinite}.article-grid__trigger{width:100%;height:1px;margin-top:var(--spacing-4);pointer-events:none;opacity:0}@keyframes article-grid-spin{to{transform:rotate(1turn)}}