:root{--color-primary: #148e07;--color-primary-dark: #2f5e31;--color-white: #fff;--color-black: #333;--color-gray-100: #f5f5f5;--color-gray-200: #ddd;--color-gray-300: #999;--color-gray-400: #666;--color-gray-500: #444;--shadow-sm: 0 2px 4px rgba(0,0,0,.1);--border-radius-sm: 4px;--border-radius-md: 8px}body{margin:0;font-family:Arial,sans-serif;background-color:var(--color-gray-100)}.app-container{max-width:1200px;margin:0 auto;padding:6px;background-color:var(--color-white);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm)}.url-display{color:var(--color-gray-400);font-size:14px;margin-bottom:20px}.controls-container{margin-bottom:30px;display:flex;gap:20px}.racing-select{padding:8px 12px;font-size:16px;border:2px solid var(--color-gray-200);border-radius:var(--border-radius-sm);background-color:var(--color-white);min-width:200px;cursor:pointer;transition:border-color .3s ease}.racing-select:hover{border-color:var(--color-gray-300)}.racing-select:focus{outline:none;border-color:var(--color-primary)}.article-container{padding:6px;max-width:95vw}.get-article-btn{padding:10px 20px;font-size:16px;background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .3s ease;margin-left:10px;margin-bottom:10px}.get-article-btn:hover{background-color:var(--color-primary-dark)}.get-article-btn:disabled{background-color:var(--color-gray-300);cursor:not-allowed}.article-content{margin-top:30px}.article-title{font-size:1.125rem;font-weight:600;margin:0 0 .5rem;color:var(--color-black)}.article-subheader{font-size:18px;color:var(--color-gray-400);margin-bottom:20px}.article-time{font-size:.875rem;color:var(--color-gray-300);margin-top:auto}.article-image{max-width:100%;height:auto;width:100%;object-fit:contain;margin:20px 0}.article-paragraph{font-size:16px;line-height:1.6;color:var(--color-gray-500);width:100%;word-wrap:break-word;overflow-wrap:break-word;max-width:800px;margin:0 auto 15px}.article-paragraph code{display:block;width:100%;max-width:100%;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;background-color:var(--color-gray-100);padding:15px;border-radius:var(--border-radius-sm);font-family:Courier New,Courier,monospace;font-size:.875rem;line-height:1.5;box-sizing:border-box}.article-paragraph pre{margin:0}.article-heading{font-size:22px;color:var(--color-black);margin:25px 0 15px}.article-preview-list{display:grid;grid-template-columns:repeat(1,1fr);gap:20px;padding:0;margin:0;list-style:none}.article-preview-item{background:var(--color-white);border-radius:var(--border-radius-md);display:flex;gap:20px;transition:transform .2s ease,box-shadow .2s ease}.article-preview-delimiter{width:100%}.article-preview-item:hover{transform:translateY(-3px)}.article-preview-image{flex:0 0 150px;height:100px;overflow:hidden;border-radius:var(--border-radius-sm)}.article-preview-image img{width:100%;height:100%;object-fit:cover}.article-preview-content{flex:1;display:flex;flex-direction:column;min-height:100%;justify-content:space-between}.article-preview-text{flex:1}.article-seria{font-size:.875rem;color:var(--color-gray-400);margin:0 0 .5rem;font-weight:800}.select-article-btn{width:100%;padding:8px 16px;margin-top:10px;background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .3s ease;text-align:center}.select-article-btn:hover{background-color:var(--color-primary-dark)}.article-link{text-decoration:none;color:inherit;display:block}.article-link:hover{text-decoration:underline}.empty-message{color:#666;font-style:italic}.selected-article{margin:20px 0;padding:15px;background-color:var(--color-gray-100);border-radius:var(--border-radius-sm);border-left:4px solid var(--color-primary)}.selected-article h3{margin:0 0 10px;color:var(--color-primary)}.selected-article p{margin:0;color:var(--color-gray-500)}.navbar{background-color:var(--color-primary);padding:1rem 0;margin-bottom:2rem}.nav-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.nav-logo{color:var(--color-white);text-decoration:none;font-size:1.5rem;font-weight:700}.nav-links{display:flex;gap:2rem}.nav-link{color:var(--color-white);text-decoration:none;font-size:1rem;transition:opacity .3s ease}.nav-link.active{border-bottom:2px solid var(--color-white);padding-bottom:3px}.nav-link:hover{opacity:.8}@media(min-width:768px){.article-image{max-height:300px}}.custom-url-section{margin-bottom:30px}.url-input-form{display:flex;gap:10px;flex-wrap:wrap}.article-url-input{flex:1;min-width:250px;padding:12px;font-size:16px;border:2px solid var(--color-gray-200);border-radius:var(--border-radius-sm);transition:border-color .3s ease}.article-url-input:focus{outline:none;border-color:var(--color-primary)}.fetch-article-btn{padding:12px 20px;font-size:16px;background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .3s ease;white-space:nowrap}.fetch-article-btn:hover{background-color:var(--color-primary-dark)}.custom-article-container{margin:30px 0;padding:6px;background-color:var(--color-white);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);border-left:2px solid var(--color-primary)}.custom-article-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--color-gray-200)}.custom-article-header h3{color:var(--color-black);margin:0}.clear-article-btn{padding:8px 16px;font-size:14px;background-color:var(--color-gray-300);color:var(--color-white);border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .3s ease}.clear-article-btn:hover{background-color:var(--color-gray-400)}.articles-list-section{margin-top:30px}.articles-list-section h3{color:var(--color-black);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--color-gray-200)}@media(max-width:600px){.url-input-form{flex-direction:column}.fetch-article-btn{width:100%}}