:root{font-family: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;font-size:16px}body{margin:0;padding:0;background-color:#f4f7fb;font-size:1rem;width:100%;height:100%;box-sizing:border-box}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}@media (max-width: 1200px){:root{font-size:15px}}@media (max-width: 992px){:root{font-size:14px}}@media (max-width: 768px){:root{font-size:13px}}@media (max-width: 576px){:root{font-size:12px}}@media (max-width: 768px){#root{padding:1rem;text-align:left}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid #ccc;position:sticky;margin-bottom:2rem}#header-title{font-size:4rem}h1{font-size:3rem;font-weight:700;color:#333;margin-bottom:1.5rem}nav{display:flex;justify-content:center;gap:2rem;margin-top:2rem}nav p{font-size:1.2rem;font-weight:500;color:#333;transition:color .3s ease,transform .3s ease}nav p:hover{color:#646cff;transform:translateY(-2px)}nav p.react:hover{color:#61dafb;transform:translateY(-2px)}.user-info{display:flex;align-items:center;gap:.5rem;position:absolute;top:1rem;right:2rem}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #646cff}.user-info p{font-size:.9rem;font-weight:500;color:#333}ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;padding:0;justify-content:center}li{list-style:none;background-color:#fff;border-radius:8px;box-shadow:0 2px 12px #0000001a;overflow:hidden;transition:all .3s ease;width:100%;max-width:300px;margin:1rem auto;display:flex;flex-direction:column}li:hover{transform:translateY(-5px);box-shadow:0 4px 18px #0003}li img{width:100%;height:180px;object-fit:cover;transition:transform .3s ease}li:hover img{transform:scale(1.05)}h2{font-size:1.25rem;font-weight:600;color:#333;margin:1rem;flex-grow:1;transition:color .3s ease}h2:hover{color:#646cff;transform:translateY(-2px)}li:hover{cursor:pointer}.card{padding:2em}.read-the-docs{color:#888}.topic-description{color:#666;padding-left:1rem}.sort-controls{display:flex;align-items:center;gap:15px;margin-bottom:20px}.sort-controls select{padding:8px 12px;font-size:14px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;transition:all .3s ease}.sort-controls select:focus{border-color:#646cff;outline:none}.sort-controls button{padding:8px 15px;font-size:14px;background-color:#646cff;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.sort-controls button:hover{background-color:#646cff}.sort-controls button:focus{outline:none}@media (max-width: 768px){.sort-controls{flex-wrap:wrap;gap:10px}}.article-container{max-width:800px;margin:2rem auto;padding:1.5rem;background:#fff;border-radius:8px;box-shadow:0 2px 12px #0000001a}.article-topic{font-size:1.2rem;font-weight:700;color:#444;margin-bottom:.5rem}.article-meta{font-size:.9rem;color:#666;margin-bottom:1rem}.article-image{width:100%;height:auto;border-radius:8px;margin-bottom:1rem}.article-body{font-size:1.1rem;line-height:1.6;color:#333}.article-info{margin-top:1rem;font-size:.9rem;color:#555;font-style:italic}.artilce-footer{display:flex;justify-content:space-evenly;align-items:first baseline;width:100%;padding-top:1rem;border-top:1px solid #ddd}.article-votes{font-size:1.4rem;font-weight:700;color:#333;padding-left:10rem;padding-right:10rem}.article-comments{font-size:1rem;color:#777;text-align:right}.article-votes.changed{color:#646cff;font-weight:bolder;transition:color .3s ease,font-weight .3s ease}.vote-button-wrapper{margin-left:1rem}.comments-list{display:block}.comment-card{background-color:#fff;box-shadow:0 2px 12px #0000001a;overflow:hidden;transition:all .3s ease;margin-bottom:1.5rem;max-width:800px;margin:2rem auto;padding:1.5rem;background:#fff;border-radius:8px}.comment-card:hover{transform:translateY(-5px);box-shadow:0 4px 18px #0003}.comment-header{display:flex;justify-content:space-between;margin-bottom:.5rem}.comment-header h3{font-size:1.2rem;font-weight:600;color:#333}.comment-header span{font-size:.9rem;color:#777}.comment-body{font-size:1rem;color:#555;margin:1rem 0;line-height:1.5}.comment-footer{display:flex;align-content:space-between;align-items:center;width:100%}.comment-votes{font-size:1rem;color:#333;margin-left:auto;font-weight:500;transition:all .3s ease}.comment-votes.changed{color:#646cff;font-weight:bolder;transition:color .3s ease,font-weight .3s ease}.vote-btn-up,.vote-btn-down{color:#ccc;background-color:transparent;cursor:pointer;transition:all .3s ease;border:none;font-size:2rem}.vote-btn-up:hover,.vote-btn-down:hover,.vote-btn-up.voted,.vote-btn-down.voted{color:#646cff}.vote-btn-up.voted:hover,.vote-btn-down.voted:hover{color:#5a5fe0}.vote-btn-up.voted,.vote-btn-down.voted{cursor:not-allowed}.comment-delete{padding-left:7.7rem;align-content:center;margin:auto}.comment-delete button{color:#333;background:none;border:none;font-size:1.3rem;padding:.5rem;cursor:pointer;transition:color .3s ease,transform .2s ease;margin-right:1rem}.comment-delete button:hover{color:#d32f2f;font-weight:bolder;transform:scale(1.1)}.comment-input,.comment-textarea{width:100%;padding:.8rem;margin-bottom:1rem;border:1px solid #ddd;border-radius:6px;font-size:1rem;color:#333;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;outline:none;max-width:95%}.comment-input:focus,.comment-textarea:focus{border-color:#646cff;box-shadow:0 0 5px #646cff80}.comment-form{border:2px solid #e0e0e0;padding:1.5rem;width:100%;max-width:800px;margin:2rem auto}.comment-textarea{height:120px;resize:vertical}.comment-footer{display:flex;justify-content:flex-end;margin-top:1rem}.comment-btn{background-color:#646cff;color:#fff;font-size:1rem;padding:.8rem 1.5rem;border:none;border-radius:6px;cursor:pointer;transition:background .3s ease}.comment-btn:hover{background-color:#535bf2}.comment-btn:disabled{background-color:#bbb;cursor:not-allowed}.error-container{text-align:center;padding:50px}.error-title{font-size:36px;font-weight:700;color:#555}.error-title:hover{color:#d32f2f}.error-msg{font-size:18px;color:#666}.error-msg:hover{color:#d32f2f}.error-msg a{color:#646cff;text-decoration:none}.error-msg a:hover{text-decoration:underline}.user-card{display:flex;align-items:center;padding:1rem;background:#fff;border-radius:10px;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;transition:transform .2s ease}.user-card:hover{transform:translateY(-3px)}.user-avatar-card{width:60px;height:60px;border-radius:50%;object-fit:cover;margin-right:1rem;border:2px solid #eee}.user-info-card h3{margin:0;font-size:1.1rem;color:#333}.user-info-card p{margin:0;color:#777;font-size:.95rem}