.card-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:960px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.card{display:flex;flex-direction:column;height:100%;background:var(--bg-page);border-radius:12px;border:1px solid #e8e8e8;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .18s ease,transform .18s ease,background-color .18s ease}.card:hover{box-shadow:0 8px 24px #00000017;transform:translateY(-2px)}.card-cover{height:140px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.card-cover-image{width:100%;height:100%;object-fit:cover}.card-cover-shape1{width:64px;height:64px;border-radius:16px;opacity:.18;position:absolute;top:28px;left:28px}.card-cover-shape2{width:40px;height:40px;border-radius:12px;opacity:.25;position:absolute;bottom:20px;right:36px}.card-cover-label{font-size:36px;font-weight:700;opacity:.22;user-select:none;letter-spacing:-2px}.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;gap:10px}.card-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:11px;font-weight:500;color:var(--color-primary);background:var(--bg-tag);border-radius:999px;padding:2px 8px}.card-title{font-size:16px;font-weight:700;color:var(--fg-heading);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}.card-excerpt{font-size:13.5px;color:var(--fg-meta);line-height:1.65;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-footer{padding-top:8px;border-top:1px solid var(--bg-code)}.card-date{font-size:12px;color:var(--color-text-faint)}.post-card-item[hidden]{display:none}:root[data-posts-view=list] .post-collection{display:block;border-top:1px solid var(--bg-code)}:root[data-posts-view=list] .post-collection .card{flex-direction:row;align-items:flex-start;gap:16px;height:auto;border:none;border-bottom:1px solid var(--bg-code);border-radius:0;padding:16px 4px;background:transparent}:root[data-posts-view=list] .post-collection .card:hover{box-shadow:none;transform:none;background:color-mix(in srgb,var(--color-primary) 5%,transparent)}:root[data-posts-view=list] .post-collection .card:hover .card-title{color:var(--color-primary-hover, var(--color-primary))}:root[data-posts-view=list] .post-collection .card-cover{flex:0 0 auto;width:116px;height:78px;border-radius:8px}:root[data-posts-view=list] .post-collection .card-cover-shape1{width:34px;height:34px;border-radius:10px;top:12px;left:12px}:root[data-posts-view=list] .post-collection .card-cover-shape2{width:22px;height:22px;border-radius:7px;bottom:10px;right:14px}:root[data-posts-view=list] .post-collection .card-cover-label{font-size:20px;letter-spacing:-1px}:root[data-posts-view=list] .post-collection .card-body{padding:0;gap:6px}:root[data-posts-view=list] .post-collection .card-title{order:-1;font-size:17px;min-height:0;-webkit-line-clamp:2}:root[data-posts-view=list] .post-collection .card-excerpt{flex:0 1 auto;-webkit-line-clamp:2}:root[data-posts-view=list] .post-collection .card-tags{order:1}:root[data-posts-view=list] .post-collection .card-footer{order:2;padding-top:2px;border-top:none}@media(max-width:640px){:root[data-posts-view=list] .post-collection .card{gap:12px;padding:14px 2px}:root[data-posts-view=list] .post-collection .card-cover{width:84px;height:60px}:root[data-posts-view=list] .post-collection .card-excerpt{display:none}:root[data-posts-view=list] .post-collection .card-tags{display:none}}.view-toggle{display:inline-flex;flex-shrink:0;gap:2px;padding:3px;border:1px solid var(--border-default);border-radius:999px;background:var(--bg-page)}.view-toggle__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:none;border-radius:999px;background:transparent;color:var(--fg-meta);font-size:13px;font-weight:500;font-family:var(--font-sans);cursor:pointer;transition:background .15s ease,color .15s ease}.view-toggle__btn:hover{color:var(--color-primary)}.view-toggle__btn.is-active{background:var(--color-primary-light);color:var(--color-primary);font-weight:600}@media(max-width:520px){.view-toggle__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.view-toggle__btn{padding:6px 10px}}