:root{--radius:16px;--radius-sm:10px;--font-body:"Plus Jakarta Sans", sans-serif;--font-head:"Bricolage Grotesque", sans-serif}[data-theme=dark]{--bg:#0a0a0d;--surface:#111116;--card:#16161c;--border:#222230;--border2:#2c2c3a;--accent:#7c6bff;--accent-h:#9585ff;--accent-bg:#7c6bff1f;--accent-glow:#7c6bff40;--green:#22d48f;--rose:#ff5f7a;--txt:#eeeef5;--txt2:#9090aa;--txt3:#55556a;--shadow:0 4px 24px #0006}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.7}.skeleton{background:linear-gradient(90deg, var(--border) 25%, var(--border2) 50%, var(--border) 75%);background-size:200% 100%;border-radius:12px;animation:1.4s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cover{border-radius:var(--radius);width:100%;height:360px;margin-bottom:32px}.skeleton-title{border-radius:12px;width:85%;height:44px;margin-bottom:20px}.skeleton-tags{gap:10px;margin-bottom:20px;display:flex}.skeleton-tag{border-radius:30px;width:80px;height:28px}.skeleton-meta{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:32px;padding-bottom:24px;display:flex}.skeleton-avatar{border-radius:50%;width:42px;height:42px}.skeleton-meta-text{flex:1}.skeleton-line-sm{border-radius:20px;width:180px;height:14px;margin-bottom:8px}.skeleton-line-xs{border-radius:20px;width:110px;height:12px}.skeleton-react-group{gap:12px;display:flex}.skeleton-react-btn{border-radius:30px;width:90px;height:38px}.skeleton-readtime{border-radius:30px;width:100px;height:32px}.skeleton-body{margin-top:24px}.skeleton-line{border-radius:8px;width:100%;height:18px;margin-bottom:14px}.skeleton-line.short{width:70%}.skeleton-line.medium{width:85%}.skeleton-share{flex-wrap:wrap;align-items:center;gap:20px;margin-top:48px;display:flex}.skeleton-share-btn{border-radius:30px;width:100px;height:40px}.skeleton-related-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px;display:grid}.skeleton-related-card{border-radius:var(--radius-sm);height:180px}.skeleton-comment{border-radius:var(--radius-sm);height:100px;margin-bottom:14px}.topbar{z-index:100;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);background:#111116d9;align-items:center;gap:16px;height:56px;padding:0 24px;display:flex;position:sticky;top:0}.topbar-back{color:var(--txt2);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);cursor:pointer;align-items:center;gap:8px;padding:6px 12px;font-family:inherit;font-size:13.5px;font-weight:600;text-decoration:none;transition:all .15s;display:flex}.topbar-back:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}.topbar-back svg{flex-shrink:0;width:16px;height:16px}.topbar-logo{font-family:var(--font-head);color:var(--txt);letter-spacing:-.4px;align-items:center;gap:8px;font-size:18px;font-weight:800;text-decoration:none;display:flex}.topbar-logo-mark{background:var(--accent);width:28px;height:28px;box-shadow:0 0 16px var(--accent-glow);border-radius:8px;place-items:center;display:grid}.topbar-logo-mark svg{fill:#fff;width:14px;height:14px}.topbar-spacer{flex:1}.page-wrap{max-width:780px;margin:0 auto;padding:40px 24px 80px}.art-grid{flex-direction:column;gap:0;margin-top:32px;display:flex}.art-list-item{border-bottom:1px solid var(--border);cursor:pointer;gap:24px;padding:24px 0;transition:background .2s;display:flex}.art-list-item:hover{background:var(--surface)}.art-list-cover{object-fit:cover;border-radius:var(--radius-sm);background:var(--surface);flex-shrink:0;width:180px;height:120px}.art-list-content{flex:1}.art-list-title{font-family:var(--font-head);color:var(--txt);margin-bottom:8px;font-size:20px;font-weight:700;line-height:1.3}.art-list-excerpt{color:var(--txt2);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:12px;font-size:14px;line-height:1.5;display:-webkit-box;overflow:hidden}.art-list-meta{color:var(--txt3);flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;display:flex}.art-list-author{align-items:center;gap:6px;display:flex}.art-list-avatar{object-fit:cover;border-radius:50%;width:24px;height:24px}.art-list-tags{flex-wrap:wrap;gap:6px;display:flex}.art-list-tag{background:var(--accent-bg);color:var(--accent);border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700}.art-list-actions{gap:12px;margin-top:12px;display:flex}.art-act-btn{color:var(--txt2);cursor:pointer;background:0 0;border:none;border-radius:30px;align-items:center;gap:4px;padding:5px 8px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.art-act-btn svg{width:14px;height:14px}.art-act-btn.liked{color:var(--rose)}.art-act-btn.liked svg{fill:var(--rose);stroke:var(--rose)}.art-act-btn.echoed{color:var(--green)}.art-act-btn:hover{background:var(--accent-bg);color:var(--accent)}.art-filters{margin-bottom:24px}.art-search-input{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--txt);font-size:14px;font-family:var(--font-body);outline:none;padding:12px 16px;transition:border-color .15s}.art-search-input:focus{border-color:var(--accent)}.art-category-pills{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.art-cat-pill{background:var(--surface);border:1.5px solid var(--border);color:var(--txt2);cursor:pointer;border-radius:40px;padding:6px 16px;font-size:13px;font-weight:600;transition:all .15s}.art-cat-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}.art-pagination{justify-content:center;align-items:center;gap:16px;margin-top:40px;display:flex}.art-pagination button{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--txt2);cursor:pointer;padding:8px 18px;font-size:14px;font-weight:600;transition:all .15s}.art-pagination button:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}.art-pagination button:disabled{opacity:.4;cursor:not-allowed}.art-cover{object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);width:100%;max-height:420px;margin-bottom:32px;display:block}.art-tags{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.art-tag{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-glow);letter-spacing:.02em;border-radius:20px;padding:3px 10px;font-size:11.5px;font-weight:700}.art-title{font-family:var(--font-head);color:var(--txt);letter-spacing:-.6px;margin-bottom:18px;font-size:clamp(24px,4vw,36px);font-weight:800;line-height:1.25}.art-meta{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:32px;padding-bottom:24px;display:flex}.art-author-av{object-fit:cover;background:var(--accent-bg);border:2px solid var(--border);border-radius:50%;width:38px;height:38px}.art-meta-info{flex:1}.art-author-name{color:var(--txt);font-size:14px;font-weight:700}.art-date{color:var(--txt3);margin-top:2px;font-size:12px}.art-reactions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.art-react-btn{border:1.5px solid var(--border);background:var(--card);color:var(--txt2);cursor:pointer;border-radius:20px;align-items:center;gap:6px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:600;transition:all .15s;display:flex}.art-react-btn svg{width:16px;height:16px}.art-react-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}.art-react-btn.liked{border-color:var(--rose);color:var(--rose);background:#ff5f7a1a}.art-react-btn.liked svg{fill:var(--rose);stroke:var(--rose)}.art-react-btn.echoed{border-color:var(--green);color:var(--green);background:#22d48f14}.art-body{color:var(--txt2);white-space:pre-wrap;word-break:break-word;font-size:16px;line-height:1.8}.art-body p{margin-bottom:1.2em}.art-body h1,.art-body h2,.art-body h3{color:var(--txt);margin-top:1.5em;margin-bottom:.5em}.art-body pre{background:var(--surface);border-radius:var(--radius-sm);margin:1em 0;padding:1rem;overflow-x:auto}.art-body code{background:var(--card);border-radius:6px;padding:.2em .4em;font-size:.9em}.art-share{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:16px;margin-top:40px;padding:20px;display:flex}.art-share-label{color:var(--txt);flex:1;font-size:13.5px;font-weight:700}.art-share-btns{gap:8px;display:flex}.art-share-btn{border-radius:var(--radius-sm);cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--txt2);align-items:center;gap:6px;padding:7px 16px;font-family:inherit;font-size:12.5px;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex}.art-share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}.art-related{margin-top:48px}.art-related-title{font-family:var(--font-head);color:var(--txt);border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:12px;font-size:18px;font-weight:700}.art-related-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;display:grid}.art-related-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;transition:all .2s;display:block;overflow:hidden}.art-related-card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-2px)}.art-related-cover{object-fit:cover;background:var(--surface);width:100%;height:120px;display:block}.art-related-body{padding:10px 12px}.art-related-card-title{color:var(--txt);margin-bottom:5px;font-size:13px;font-weight:700;line-height:1.35}.art-related-author{color:var(--txt3);font-size:11px}.art-comments{margin-top:48px}.art-comments-title{font-family:var(--font-head);color:var(--txt);border-bottom:1px solid var(--border);margin-bottom:20px;padding-bottom:12px;font-size:18px;font-weight:700}.art-comment-compose{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);margin-bottom:24px;padding:14px 16px}.art-comment-compose textarea{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--txt);font-size:13.5px;font-family:var(--font-body);resize:vertical;outline:none;min-height:80px;padding:9px 13px;transition:border-color .15s}.art-comment-compose textarea:focus{border-color:var(--accent)}.art-comment-submit{border-radius:var(--radius-sm);background:var(--accent);color:#fff;cursor:pointer;font-size:13.5px;font-weight:700;font-family:var(--font-body);border:none;padding:9px 22px;transition:background .15s,transform .15s}.art-comment-submit:hover{background:var(--accent-h);transform:translateY(-1px)}.art-comment-item{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;padding:14px 16px;animation:.2s both artCardIn}.art-comment-header{align-items:center;gap:8px;margin-bottom:7px;display:flex}.art-comment-user{color:var(--txt);font-size:13px;font-weight:700}.art-comment-time{color:var(--txt3);margin-left:auto;font-size:11.5px}.art-comment-text{color:var(--txt2);font-size:13.5px;line-height:1.6}.art-reply-btn{color:var(--accent);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font-body);background:0 0;border:none;margin-top:8px;padding:0}.art-reply-btn:hover{color:var(--accent-h)}.reply-to-banner{background:var(--accent-bg);border:1px solid var(--accent-glow);border-radius:var(--radius-sm);color:var(--accent);align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;font-size:13px;font-weight:600;display:flex}.reply-to-banner button{color:var(--accent);cursor:pointer;background:0 0;border:none;margin-left:auto;font-size:16px}@keyframes artCardIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width:600px){.page-wrap{padding:24px 16px 60px}.topbar{padding:0 16px}.skeleton-cover{height:220px}.art-list-item{flex-direction:column;gap:12px}.art-list-cover{width:100%;height:160px}.art-list-title{font-size:18px}}