:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background:#f8fafc;color:#1f2937}#root{min-height:100vh}button{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}a{color:#3b82f6;text-decoration:none}a:hover{text-decoration:underline}.post-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem;margin-bottom:1rem;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.post-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#3b82f6}.post-card:focus{outline:2px solid #3b82f6;outline-offset:2px}.post-title{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0 0 .75rem;line-height:1.3;text-transform:capitalize}.post-body{color:#4b5563;line-height:1.6;margin:0 0 1rem;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.post-meta{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:#6b7280}.post-id,.post-user{padding:.25rem .5rem;background:#f3f4f6;border-radius:6px;font-weight:500}.post-user{background:#dbeafe;color:#1d4ed8}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1rem}.loading-spinner{width:32px;height:32px;border:3px solid #e2e8f0;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.loading-message{color:#6b7280;font-size:.875rem;margin:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;gap:1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;margin:1rem}.error-icon{font-size:2rem}.error-title{color:#dc2626;font-size:1.25rem;font-weight:600;margin:0}.error-message{color:#7f1d1d;margin:0;line-height:1.5}.error-retry-btn{background:#dc2626;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.error-retry-btn:hover{background:#b91c1c}.error-retry-btn:focus{outline:2px solid #dc2626;outline-offset:2px}.posts-list-container{max-width:800px;margin:0 auto;padding:2rem 1rem}.posts-header{text-align:center;margin-bottom:2rem}.posts-header h1{font-size:2.5rem;font-weight:700;color:#1f2937;margin:0 0 .5rem;background:linear-gradient(135deg,#3b82f6,#1d4ed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.posts-header p{color:#6b7280;font-size:1.125rem;margin:0}@media (max-width: 768px){.posts-list-container{padding:1rem .5rem}.posts-header h1{font-size:2rem}.posts-header p{font-size:1rem}}.comment-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;margin-bottom:.75rem}.comment-header{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}.comment-name{font-size:.875rem;font-weight:600;color:#1f2937;margin:0;text-transform:capitalize}.comment-email{font-size:.75rem;color:#6b7280;font-style:italic}.comment-body{color:#4b5563;line-height:1.5;margin:0;font-size:.875rem}.post-detail-container{max-width:800px;margin:0 auto;padding:2rem 1rem}.post-detail{background:#fff;border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #0000001a}.post-detail-header{margin-bottom:2rem}.post-detail-title{font-size:2rem;font-weight:700;color:#1f2937;margin:0 0 1.5rem;line-height:1.2;text-transform:capitalize}.post-placeholder-image{width:100%;height:300px;background-color:#e5e7eb;border-radius:8px;box-shadow:0 2px 8px #00000026}.post-detail-content{line-height:1.7}.post-detail-body{font-size:1.125rem;color:#374151;margin-bottom:2rem;text-align:justify}.author-section{border-top:1px solid #e5e7eb;padding-top:2rem}.author-section h3{color:#1f2937;font-size:1.25rem;margin:0 0 1rem}.author-info{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;background:#f9fafb;padding:1.5rem;border-radius:8px}.author-details h4{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0 0 .5rem}.author-details p{color:#6b7280;margin:.25rem 0;font-size:.875rem}.view-author-posts-btn{background:#3b82f6;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:500;cursor:pointer;transition:background-color .2s ease;white-space:nowrap}.view-author-posts-btn:hover{background:#1d4ed8}.comments-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}.comments-section h2{font-size:1.5rem;font-weight:600;color:#1f2937;margin:0 0 1.5rem}.comments-list{display:flex;flex-direction:column;gap:1rem}.no-comments{color:#6b7280;font-style:italic;text-align:center;padding:2rem}@media (max-width: 768px){.post-detail-container{padding:1rem .5rem}.post-detail{padding:1.5rem}.post-detail-title{font-size:1.5rem}.author-info{flex-direction:column;align-items:stretch}.view-author-posts-btn{align-self:flex-start}}.author-posts-container{max-width:800px;margin:0 auto;padding:2rem 1rem}.breadcrumb{margin-bottom:2rem}.breadcrumb-link{color:#3b82f6;text-decoration:none;font-weight:500;transition:color .2s ease}.breadcrumb-link:hover{color:#1d4ed8}.author-header{background:#fff;border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #0000001a}.author-profile h1{font-size:2rem;font-weight:700;color:#1f2937;margin:0 0 .5rem}.author-username{font-size:1.25rem;color:#3b82f6;font-weight:500;margin:0 0 1.5rem}.author-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.5rem}.author-details p{color:#4b5563;margin:.25rem 0;font-size:.875rem}.author-details strong{color:#1f2937}.posts-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}.posts-section h2{font-size:1.5rem;font-weight:600;color:#1f2937;margin:0 0 1.5rem}.posts-grid{display:flex;flex-direction:column;gap:1rem}.no-posts{text-align:center;color:#6b7280;font-style:italic;padding:2rem}@media (max-width: 768px){.author-posts-container{padding:1rem .5rem}.author-header{padding:1.5rem}.author-profile h1{font-size:1.5rem}.author-username{font-size:1rem}.author-details{grid-template-columns:1fr}.posts-section{padding:1.5rem}}.app{min-height:100vh;background:#fff;background-attachment:fixed}*{box-sizing:border-box}html{scroll-behavior:smooth}*:focus{outline:2px solid #3b82f6;outline-offset:2px}