.kp-page{display:flex;flex-direction:column;min-height:100vh}.kp-brand{font-weight:var(--font-weight-semibold);color:var(--text-primary)}.kp-brand-tag{color:var(--primary-500);font-weight:var(--font-weight-bold)}.kp-builder-link{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--primary-600);text-decoration:none;position:relative;z-index:1;transition:color var(--transition-fast);margin-top:var(--spacing-xs)}.kp-builder-link:hover{color:var(--primary-800)}.kp-header-intro{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.7;max-width:64ch;margin:var(--spacing-sm) 0 0 0;position:relative;z-index:1}.kp-header-intro strong{color:var(--text-primary);font-weight:var(--font-weight-semibold)}.kp-header-intro a{color:var(--primary-600);text-decoration:none}.kp-header-intro a:hover{text-decoration:underline}.kp-main{padding-block:var(--spacing-xl);background:var(--gray-50);flex:1}.kp-controls{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:flex-start;margin-bottom:var(--spacing-md)}.kp-filter-group{display:flex;flex-direction:column;gap:var(--spacing-sm);flex:1}.kp-filter{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}.kp-filter-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;min-width:4.5rem}.kp-filter-btn{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:.375rem .875rem;border-radius:var(--radius-full);background:var(--white);border:1px solid var(--border-default);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.kp-filter-btn:hover{border-color:var(--cc, var(--primary-300));color:var(--cc, var(--primary-600))}.kp-filter-btn.is-active{background:var(--cc, var(--primary-600));border-color:var(--cc, var(--primary-600));color:var(--white)}.kp-diff-btn{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:.375rem .875rem;border-radius:var(--radius-full);background:var(--white);border:1px solid var(--border-default);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.kp-diff-btn:hover{border-color:var(--dc, var(--primary-300));color:var(--dc, var(--primary-600))}.kp-diff-btn.is-active{background:var(--dc, var(--primary-600));border-color:var(--dc, var(--primary-600));color:var(--white)}.kp-search-wrap{position:relative}.kp-search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.kp-search{padding:.5rem 1rem .5rem 2.25rem;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--white);font-size:var(--font-size-sm);color:var(--text-primary);width:240px;transition:border-color var(--transition-fast)}.kp-search:focus{outline:none;border-color:var(--primary-400)}.kp-results-count{font-size:var(--font-size-xs);color:var(--text-muted);margin-bottom:var(--spacing-md)}.kp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.kp-card{background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.kp-card:hover{border-color:var(--primary-200);box-shadow:0 4px 16px #0000000f}.kp-card[hidden]{display:none}.kp-card-header{display:flex;align-items:center;justify-content:space-between}.kp-card-badges{display:flex;align-items:center;gap:.375rem}.kp-cat-badge{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:.2rem .625rem;border-radius:var(--radius-full);background:color-mix(in srgb,var(--cc, #6366f1) 12%,transparent);color:var(--cc, #6366f1)}.kp-diff-badge{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:.2rem .625rem;border-radius:var(--radius-full);background:color-mix(in srgb,var(--dc, #10b981) 10%,transparent);color:var(--dc, #10b981)}.kp-copy-btn{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:.25rem .75rem;border-radius:var(--radius-lg);background:var(--primary-600);color:var(--white);border:none;cursor:pointer;transition:background var(--transition-fast)}.kp-copy-btn:hover{background:var(--primary-500)}.kp-copy-btn.is-copied{background:#10b981}.kp-card-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0}.kp-card-title a{color:var(--text-primary);text-decoration:none;transition:color var(--transition-fast)}.kp-card-title a:hover{color:var(--primary-600)}.kp-card-desc{font-size:var(--font-size-sm);color:var(--text-muted);margin:0}.kp-card-tags{display:flex;flex-wrap:wrap;gap:.25rem}.kp-tag{font-size:.65rem;padding:.15rem .5rem;border-radius:var(--radius-full);background:var(--gray-100);color:var(--text-muted);border:1px solid var(--border-subtle)}.kp-prompt-preview{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);background:var(--gray-50);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:.75rem;white-space:pre-wrap;word-break:break-word;line-height:1.5;max-height:68px;overflow:hidden;margin:0}.kp-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.kp-detail-link{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--primary-600);text-decoration:none;transition:color var(--transition-fast)}.kp-detail-link:hover{color:var(--primary-800)}.kp-expand-btn{font-size:var(--font-size-xs);color:var(--text-muted);background:none;border:none;cursor:pointer;padding:0;transition:color var(--transition-fast)}.kp-expand-btn:hover{color:var(--text-primary)}.kp-empty{text-align:center;color:var(--text-muted);padding:var(--spacing-xl) 0;font-size:var(--font-size-sm)}.kp-empty a{color:var(--primary-600)}.kp-modal-overlay{position:fixed;inset:0;background:#000000a6;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}.kp-modal-overlay[hidden]{display:none}.kp-modal{background:var(--gray-900);border-radius:var(--radius-xl);width:100%;max-width:680px;max-height:85vh;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 64px #00000080}.kp-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-md);border-bottom:1px solid rgba(255,255,255,.08)}.kp-modal-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:#ffffffb3}.kp-modal-actions{display:flex;gap:.5rem;align-items:center}.kp-modal-copy{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:.375rem .875rem;border-radius:var(--radius-lg);background:var(--primary-600);color:var(--white);border:none;cursor:pointer;transition:background var(--transition-fast)}.kp-modal-copy:hover{background:var(--primary-500)}.kp-modal-copy.is-copied{background:#10b981}.kp-modal-close{background:none;border:none;color:#fff6;cursor:pointer;font-size:1rem;padding:.25rem .5rem;border-radius:var(--radius-sm);transition:color var(--transition-fast)}.kp-modal-close:hover{color:var(--white)}.kp-modal-body{flex:1;overflow-y:auto;padding:var(--spacing-md);font-family:var(--font-mono);font-size:var(--font-size-sm);color:#ffffffd9;line-height:1.7;white-space:pre-wrap;word-break:break-word;margin:0}.kp-modal-footer{padding:var(--spacing-md) var(--spacing-md);border-top:1px solid rgba(255,255,255,.08)}.kp-modal-builder-btn{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--primary-300);text-decoration:none;transition:color var(--transition-fast)}.kp-modal-builder-btn:hover{color:var(--white)}@media(max-width:1024px){.kp-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.kp-grid{grid-template-columns:1fr}.kp-controls{flex-direction:column;align-items:stretch}.kp-search{width:100%}.kp-filter-label{min-width:3.5rem}}.kpd-page{display:flex;flex-direction:column;min-height:100vh}.kpd-header-badges{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.kpd-diff-badge{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:.25rem .75rem;border-radius:var(--radius-full);background:color-mix(in srgb,var(--dc, #10b981) 12%,transparent);color:var(--dc, #10b981);border:1px solid color-mix(in srgb,var(--dc, #10b981) 25%,transparent)}.kpd-desc{font-size:var(--font-size-lg);color:var(--text-secondary);margin:var(--spacing-xs) 0 0 0;max-width:60ch;position:relative;z-index:1}.kpd-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:var(--spacing-sm);position:relative;z-index:1}.kpd-tag{font-size:.7rem;padding:.2rem .6rem;border-radius:var(--radius-full);background:var(--gray-100);color:var(--text-muted);border:1px solid var(--border-subtle)}.kpd-main{padding-block:var(--spacing-xl);background:var(--gray-50);flex:1}.kpd-layout{display:grid;grid-template-columns:1fr 280px;gap:var(--spacing-xl);align-items:start}.kpd-prompt-box{background:var(--gray-900);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.08);overflow:hidden}.kpd-prompt-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-md);border-bottom:1px solid rgba(255,255,255,.08);background:#ffffff08}.kpd-prompt-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:#fff6;text-transform:uppercase;letter-spacing:.08em}.kpd-copy-btn{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:.375rem .875rem;border-radius:var(--radius-lg);background:var(--primary-600);color:var(--white);border:none;cursor:pointer;transition:background var(--transition-fast)}.kpd-copy-btn:hover{background:var(--primary-500)}.kpd-copy-btn.is-copied{background:#10b981}.kpd-prompt-text{padding:var(--spacing-md);font-family:var(--font-mono);font-size:var(--font-size-sm);color:#ffffffd9;line-height:1.75;white-space:pre-wrap;word-break:break-word;margin:0;overflow-x:auto}.kpd-seo-text{margin-top:var(--spacing-xl);background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--spacing-md)}.kpd-seo-text h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0 0 var(--spacing-sm) 0}.kpd-seo-text p{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.7;margin:0 0 var(--spacing-sm) 0}.kpd-seo-text p:last-child{margin-bottom:0}.kpd-seo-text a{color:var(--primary-600);text-decoration:none}.kpd-seo-text a:hover{text-decoration:underline}.kpd-how-to{margin-top:var(--spacing-lg);background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--spacing-md)}.kpd-how-to h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0 0 var(--spacing-md) 0}.kpd-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-md);counter-reset:steps}.kpd-steps li{display:grid;grid-template-columns:2rem 1fr;gap:.5rem var(--spacing-sm);counter-increment:steps}.kpd-steps li:before{content:counter(steps);grid-row:1 / 3;width:2rem;height:2rem;background:var(--primary-600);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);flex-shrink:0;margin-top:.1rem}.kpd-steps li strong{font-size:var(--font-size-sm);color:var(--text-primary)}.kpd-steps li p{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0}.kpd-steps li p a{color:var(--primary-600);text-decoration:none}.kpd-steps li p a:hover{text-decoration:underline}.kpd-steps li code{font-family:var(--font-mono);font-size:.8em;background:var(--gray-100);padding:.1em .4em;border-radius:var(--radius-sm);color:var(--primary-700)}.kpd-meta-card,.kpd-builder-card,.kpd-related{background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.kpd-meta-card h3,.kpd-related h3{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0 0 var(--spacing-md) 0}.kpd-meta-list{display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--spacing-md);margin:0}.kpd-meta-list dt{font-size:var(--font-size-xs);color:var(--text-muted);font-weight:var(--font-weight-medium);padding-top:.15rem}.kpd-meta-list dd{margin:0;font-size:var(--font-size-sm)}.kpd-meta-link{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:.2rem .625rem;border-radius:var(--radius-full);background:color-mix(in srgb,var(--cc, #6366f1) 12%,transparent);color:var(--cc, #6366f1);text-decoration:none}.kpd-diff-inline{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:.2rem .625rem;border-radius:var(--radius-full);background:color-mix(in srgb,var(--dc, #10b981) 10%,transparent);color:var(--dc, #10b981)}.kpd-meta-tags{display:flex;flex-wrap:wrap;gap:.25rem}.kpd-tag-sm{font-size:.65rem;padding:.15rem .5rem;border-radius:var(--radius-full);background:var(--gray-100);color:var(--text-muted);border:1px solid var(--border-subtle)}.kpd-builder-card{display:flex;flex-direction:column;gap:var(--spacing-sm);background:color-mix(in srgb,var(--primary-600) 5%,white);border-color:color-mix(in srgb,var(--primary-600) 20%,transparent)}.kpd-builder-card p{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0}.kpd-builder-btn{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);padding:.5rem 1rem;border-radius:var(--radius-lg);background:var(--primary-600);color:var(--white);text-decoration:none;transition:background var(--transition-fast);align-self:flex-start}.kpd-builder-btn:hover{background:var(--primary-500)}.kpd-related-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.kpd-related-link{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-radius:var(--radius-lg);background:var(--gray-50);border:1px solid var(--border-subtle);text-decoration:none;transition:border-color var(--transition-fast),background var(--transition-fast);gap:.5rem}.kpd-related-link:hover{border-color:var(--primary-200);background:var(--white)}.kpd-related-title{font-size:var(--font-size-xs);color:var(--text-primary);font-weight:var(--font-weight-medium)}.kpd-related-diff{font-size:.6rem;padding:.15rem .5rem;border-radius:var(--radius-full);background:color-mix(in srgb,var(--dc, #10b981) 10%,transparent);color:var(--dc, #10b981);white-space:nowrap;flex-shrink:0}.kpd-back{margin-top:var(--spacing-sm)}.kpd-back-link{font-size:var(--font-size-sm);color:var(--text-muted);text-decoration:none;transition:color var(--transition-fast)}.kpd-back-link:hover{color:var(--primary-600)}@media(max-width:900px){.kpd-layout{grid-template-columns:1fr}.kpd-sidebar{order:-1}.kpd-meta-card,.kpd-builder-card,.kpd-related{margin-bottom:var(--spacing-sm)}}