.cat-hero{position:relative;padding:48px 0 36px;overflow:hidden}.cat-hero::before{content:'';position:absolute;top:-40%;right:-10%;width:480px;height:480px;background:radial-gradient(circle,oklch(58% 0.18 255 / 6%),transparent 70%);pointer-events:none}.cat-hero h1{font-size:clamp(38px,5vw,56px);margin-bottom:12px;position:relative}.cat-hero .cat-desc{font-size:16px;color:var(--muted);max-width:60ch;line-height:1.6;position:relative}.cat-code-decor{position:absolute;right:0;top:20px;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:oklch(54% 0.012 250 / 20%);text-align:right;pointer-events:none;user-select:none}.cat-code-decor span{display:block}.cat-code-decor .kw{color:oklch(58% 0.18 255 / 18%)}@media (max-width:768px){.cat-code-decor{display:none}.cat-hero{padding:32px 0 24px}}.cat-stats-row{display:flex;gap:24px;padding:20px 0 0;flex-wrap:wrap;position:relative}.cat-stats-row .stat-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);letter-spacing:-0.01em}.cat-stats-row .stat-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}.cat-stats-row .stat-item strong{color:var(--fg);font-weight:600;font-family:var(--font-mono);font-size:14px}.cat-about{position:relative;margin:0 0 28px;padding:16px 20px;background:oklch(96% 0.004 250);border-radius:var(--radius-md);font-size:14px;color:var(--muted);line-height:1.6;cursor:pointer;transition:background 0.15s}.cat-about:hover{background:oklch(94% 0.005 250)}.cat-about .about-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.cat-about .about-header span{font-weight:600;color:var(--fg);font-size:13px;letter-spacing:0.02em;text-transform:uppercase}.cat-about .about-header svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;transition:transform 0.2s}.cat-about.open .about-header svg{transform:rotate(180deg)}.cat-about .about-body{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.cat-about.open .about-body{display:block}.cat-about .about-body p:last-child{margin-bottom:0}.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap}.cat-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}.cat-tabs a{padding:10px 20px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 0.15s,border-color 0.15s}.cat-tabs a.active{color:var(--fg);border-bottom-color:var(--accent)}.cat-tabs a:hover{color:var(--fg);text-decoration:none}.cat-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.cat-sort select{padding:4px 28px 4px 10px;font-size:13px;font-family:var(--font-body);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--fg);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6964' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.cat-sort select:focus{outline:none;border-color:var(--accent)}.cat-subcats-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}.cat-subcats-filter a{padding:5px 16px;border:1px solid var(--border);border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;transition:border-color 0.15s,color 0.15s,background 0.15s}.cat-subcats-filter a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}.cat-subcats-filter a.active{background:var(--accent);border-color:var(--accent);color:#fff}.featured-post{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:28px;margin-bottom:24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);align-items:center}.featured-post .fp-image{border-radius:var(--radius-md);overflow:hidden;background:oklch(92% 0.005 250);aspect-ratio:16/10}.featured-post .fp-image img{width:100%;height:100%;object-fit:cover;display:block}.featured-post .fp-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;border-radius:999px;margin-bottom:12px}.featured-post .fp-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5}.featured-post h2{font-size:clamp(22px,2.5vw,28px);margin-bottom:8px}.featured-post h2 a{color:var(--fg)}.featured-post h2 a:hover{color:var(--accent);text-decoration:none}.featured-post .fp-excerpt{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:16px}.featured-post .fp-meta{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted)}.featured-post .fp-meta .author-mini{display:flex;align-items:center;gap:8px}.featured-post .fp-meta .author-mini .avatar{width:28px;height:28px;border-radius:50%;background:oklch(92% 0.005 250);overflow:hidden}.featured-post .fp-meta .author-mini .avatar img{width:100%;height:100%;object-fit:cover}.featured-post .fp-meta .author-mini .name{font-weight:500;color:var(--fg)}@media (max-width:768px){.featured-post{grid-template-columns:1fr;padding:20px}.featured-post .fp-image{order:-1}}.post-card .post-author-row{display:flex;align-items:center;gap:10px;margin-top:12px}.post-card .post-author-row .mini-avatar{width:24px;height:24px;border-radius:50%;background:oklch(92% 0.005 250);overflow:hidden;flex-shrink:0}.post-card .post-author-row .mini-avatar img{width:100%;height:100%;object-fit:cover}.post-card .post-author-row .author-name{font-size:13px;font-weight:500;color:var(--fg)}.post-card .post-author-row .sep-dot{width:3px;height:3px;border-radius:50%;background:var(--border)}.post-card .post-author-row .meta-extra{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}.post-card .post-author-row .meta-extra svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}.diff-badge{display:inline-block;padding:2px 8px;font-size:11px;font-weight:600;letter-spacing:0.04em;border-radius:4px;text-transform:uppercase;margin-left:8px}.diff-badge.beginner{background:oklch(90% 0.08 145 / 30%);color:oklch(45% 0.14 145)}.diff-badge.intermediate{background:oklch(90% 0.08 220 / 30%);color:oklch(45% 0.14 220)}.diff-badge.advanced{background:oklch(90% 0.08 30 / 30%);color:oklch(45% 0.14 30)}.post-card .post-footer-meta{display:flex;align-items:center;gap:16px;margin-top:10px;font-size:12px;color:var(--muted)}.post-card .post-footer-meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:middle;margin-right:3px}.post-card .post-footer-meta span{display:inline-flex;align-items:center}.cat-tag-cloud{display:flex;flex-wrap:wrap;gap:6px}.cat-tag-cloud a{padding:4px 12px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted);text-decoration:none;transition:border-color 0.15s,color 0.15s}.cat-tag-cloud a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}.cat-tag-cloud a.tag-lg{font-size:14px}.cat-tag-cloud a.tag-md{font-size:13px}.cat-tag-cloud a.tag-sm{font-size:11px}.comment-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.comment-item:last-child{border-bottom:0}.comment-item .c-avatar{width:36px;height:36px;border-radius:50%;background:oklch(92% 0.005 250);overflow:hidden;flex-shrink:0}.comment-item .c-avatar img{width:100%;height:100%;object-fit:cover}.comment-item .c-body{flex:1;min-width:0}.comment-item .c-body .c-name{font-size:13px;font-weight:600;color:var(--fg)}.comment-item .c-body .c-text{font-size:13px;color:var(--muted);margin:2px 0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.comment-item .c-body .c-meta{font-size:11px;color:var(--muted);letter-spacing:0.02em}.cat-sibling-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px;padding:24px 0 0;border-top:1px solid var(--border)}.cat-sibling-nav a{padding:8px 20px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--fg);text-decoration:none;transition:border-color 0.15s,background 0.15s}.cat-sibling-nav a:hover{border-color:var(--accent);background:oklch(96% 0.01 255 / 30%);text-decoration:none}.cat-sibling-nav a.active-cat{background:var(--accent);border-color:var(--accent);color:#fff}.cat-subscribe-card{margin:40px 0 0;padding:32px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);text-align:center}.cat-subscribe-card h3{margin-bottom:8px}.cat-subscribe-card p{font-size:14px;color:var(--muted);margin:0 auto 20px;max-width:48ch}.cat-subscribe-card .sub-form{display:flex;gap:8px;max-width:400px;margin:0 auto}.cat-subscribe-card .sub-form input{flex:1;padding:10px 14px;font-size:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);outline:none;font-family:var(--font-body)}.cat-subscribe-card .sub-form input:focus{border-color:var(--accent)}.cat-subscribe-card .sub-form button{padding:10px 24px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity 0.15s;font-family:var(--font-body)}.cat-subscribe-card .sub-form button:hover{opacity:0.85}.widget-tags .tag-count{font-size:11px;color:var(--muted);margin-left:4px}.widget-archive ul{list-style:none}.widget-archive ul li{padding:6px 0;border-bottom:1px solid var(--border)}.widget-archive ul li:last-child{border-bottom:0}.widget-archive ul li a{font-size:14px;color:var(--fg);display:flex;justify-content:space-between}.widget-archive ul li a:hover{color:var(--accent);text-decoration:none}.widget-archive ul li .count{color:var(--muted);font-size:13px;font-family:var(--font-mono)}@media print{.cat-hero::before,.cat-code-decor,.cat-sort select,.cat-subscribe-card{display:none}}.faq-item{cursor:pointer}.faq-item:not(.faq-item-open) .faq-answer{display:none}.faq-item.faq-item-open .faq-answer{display:block}.site-content--full{grid-template-columns:1fr;max-width:960px}.cat-page-layout{grid-template-columns:1fr 280px;gap:48px;max-width:var(--wide-width)}@media (max-width:820px){.cat-page-layout{grid-template-columns:1fr;gap:32px}}.cat-page-layout .cat-hero{position:relative;padding:40px 0 28px;overflow:hidden}.cat-page-layout .cat-hero::before{content:'';position:absolute;top:-30%;right:-8%;width:360px;height:360px;background:radial-gradient(circle,oklch(58% 0.18 255 / 6%),transparent 70%);pointer-events:none}.cat-page-layout .cat-hero h1{font-size:clamp(32px,4vw,44px);margin-bottom:8px;position:relative}.cat-page-layout .cat-hero .cat-desc{font-size:15px;color:var(--muted);max-width:56ch;line-height:1.6;position:relative}.cat-page-layout .cat-hero .cat-stats-row{padding-top:16px;position:relative}.cat-page-layout .cat-breadcrumb{font-size:13px;color:var(--muted);margin-bottom:12px}.cat-page-layout .cat-breadcrumb a{color:var(--muted)}.cat-page-layout .cat-breadcrumb a:hover{color:var(--accent)}.cat-page-layout .cat-breadcrumb .sep{margin:0 6px}.cat-page-layout .post-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width:720px){.cat-page-layout .post-grid{grid-template-columns:1fr}}.cat-page-layout .grid-card{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface);transition:box-shadow 0.25s,transform 0.25s}.cat-page-layout .grid-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.cat-page-layout .grid-card .gc-thumb{width:100%;height:180px;background:oklch(92% 0.005 250);overflow:hidden}.cat-page-layout .grid-card .gc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}.cat-page-layout .grid-card:hover .gc-thumb img{transform:scale(1.03)}.cat-page-layout .grid-card .gc-body{padding:18px}.cat-page-layout .grid-card .gc-body .gc-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:6px}.cat-page-layout .grid-card .gc-body .gc-meta .cat{color:var(--accent);font-weight:500}.cat-page-layout .grid-card .gc-body h3{font-size:17px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px;line-height:1.35}.cat-page-layout .grid-card .gc-body h3 a{color:var(--fg);text-decoration:none}.cat-page-layout .grid-card .gc-body h3 a:hover{color:var(--accent)}.cat-page-layout .grid-card .gc-body .gc-excerpt{font-size:14px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cat-page-layout .grid-card .gc-body .gc-footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.cat-page-layout .grid-card .gc-body .gc-footer .read-time{display:flex;align-items:center;gap:4px}.cat-page-layout .grid-card .gc-body .gc-footer .read-time svg{width:14px;height:14px}@media (max-width:768px){.cat-page-layout .cat-hero{padding:24px 0 20px}}