.CopyButton-module__khpsfW__button{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-family:var(--font-sans);font-weight:var(--weight-medium);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:0 0;transition:background .15s,color .15s}.CopyButton-module__khpsfW__button:hover{background:var(--color-bg-tertiary);color:var(--color-text)}
.ComponentCard-module__VAnEKG__card{background:var(--color-bg);color:inherit;cursor:pointer;flex-direction:column;text-decoration:none;display:flex}.ComponentCard-module__VAnEKG__card:hover .ComponentCard-module__VAnEKG__thumbnailImg{transform:scale(1.03)}.ComponentCard-module__VAnEKG__thumbnail{aspect-ratio:3/2;background:var(--color-bg-tertiary);border-radius:var(--radius-md);position:relative;overflow:hidden}.ComponentCard-module__VAnEKG__thumbnailImg{object-fit:cover;width:100%;height:100%;transition:transform .4s;position:absolute;inset:0}.ComponentCard-module__VAnEKG__thumbnailVideo{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.ComponentCard-module__VAnEKG__thumbnailPlaceholder{z-index:0;background:linear-gradient(135deg,#efefef 0%,#e3e3e3 100%);position:absolute;inset:0}.ComponentCard-module__VAnEKG__demoBtn{bottom:var(--space-3);right:var(--space-3);z-index:10;font-size:.7rem;font-weight:var(--weight-semibold);letter-spacing:.04em;color:#fff;border-radius:var(--radius-full);opacity:0;background:#2563eb;align-items:center;gap:4px;padding:5px 10px;text-decoration:none;transition:opacity .2s,transform .2s,background .15s;display:inline-flex;position:absolute;transform:translateY(4px)}.ComponentCard-module__VAnEKG__card:hover .ComponentCard-module__VAnEKG__demoBtn{opacity:1;transform:translateY(0)}.ComponentCard-module__VAnEKG__demoBtn:hover{background:#1d4ed8}.ComponentCard-module__VAnEKG__info{padding:var(--space-4) 0 0;gap:var(--space-1);flex-direction:column;display:flex}.ComponentCard-module__VAnEKG__date{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-bottom:var(--space-1)}.ComponentCard-module__VAnEKG__categoryTag{width:fit-content;font-size:.65rem;font-weight:var(--weight-semibold);letter-spacing:.05em;color:var(--color-text-secondary);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);margin-bottom:var(--space-2);padding:2px 6px;display:inline-block}.ComponentCard-module__VAnEKG__title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text);letter-spacing:-.01em;line-height:var(--leading-tight)}.ComponentCard-module__VAnEKG__description{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed);-webkit-line-clamp:2;margin-top:var(--space-1);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.page-module__NfAcRa__page{max-width:860px;padding:0 var(--space-8) var(--space-24)}.page-module__NfAcRa__breadcrumb{align-items:center;gap:var(--space-2);padding:var(--space-6) 0 var(--space-8);font-size:var(--text-sm);color:var(--color-text-tertiary);display:flex}.page-module__NfAcRa__breadcrumbLink{color:var(--color-text-tertiary);text-decoration:none;transition:color .15s}.page-module__NfAcRa__breadcrumbLink:hover{color:var(--color-text)}.page-module__NfAcRa__breadcrumbSep{color:var(--color-border-strong)}.page-module__NfAcRa__breadcrumbCurrent{color:var(--color-text-secondary)}.page-module__NfAcRa__header{padding-bottom:var(--space-10);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-10)}.page-module__NfAcRa__headerMeta{align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.page-module__NfAcRa__categoryTag{font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:lowercase}.page-module__NfAcRa__complexityBadge{font-size:var(--text-xs);font-weight:var(--weight-medium);padding:2px var(--space-2);border-radius:var(--radius-full)}.page-module__NfAcRa__simple{background:var(--color-simple-bg);color:var(--color-simple-text)}.page-module__NfAcRa__intermediate{background:var(--color-intermediate-bg);color:var(--color-intermediate-text)}.page-module__NfAcRa__advanced{background:var(--color-advanced-bg);color:var(--color-advanced-text)}.page-module__NfAcRa__date{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-left:auto}.page-module__NfAcRa__title{font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:-.03em;color:var(--color-text);margin-bottom:var(--space-4);line-height:var(--leading-tight)}.page-module__NfAcRa__description{font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-relaxed);max-width:65ch;margin-bottom:var(--space-6)}.page-module__NfAcRa__demoButton{align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-5);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-bg);background:var(--color-text);border-radius:var(--radius-md);text-decoration:none;transition:background .15s;display:inline-flex}.page-module__NfAcRa__demoButton:hover{background:var(--color-accent-hover)}.page-module__NfAcRa__section{margin-bottom:var(--space-12)}.page-module__NfAcRa__sectionLabel{font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-tertiary);margin-bottom:var(--space-4)}.page-module__NfAcRa__previewContainer{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-secondary);overflow:hidden}.page-module__NfAcRa__codeBlocks{gap:var(--space-4);flex-direction:column;display:flex}.page-module__NfAcRa__codeBlock{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.page-module__NfAcRa__codeHeader{padding:var(--space-3) var(--space-4);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.page-module__NfAcRa__filename{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--color-text-secondary)}.page-module__NfAcRa__codeBody{overflow-x:auto}.page-module__NfAcRa__codeBody pre{padding:var(--space-5) var(--space-6);font-size:var(--text-sm);font-family:var(--font-mono);margin:0;line-height:1.7;background:#fff!important}.page-module__NfAcRa__depList{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.page-module__NfAcRa__dep code{padding:var(--space-1) var(--space-3);font-size:var(--text-sm);font-family:var(--font-mono);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);display:inline-block}.page-module__NfAcRa__relatedGrid{background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-lg);grid-template-columns:repeat(3,1fr);gap:1px;display:grid;overflow:hidden}@media (max-width:700px){.page-module__NfAcRa__page{padding:0 var(--space-4) var(--space-16)}.page-module__NfAcRa__relatedGrid{grid-template-columns:1fr}}