.example-detail-page{background:#fff}.dark .example-detail-page{background:#09090b}.example-detail-hero-band{background:#f0f4f8;border-bottom:none}.dark .example-detail-hero-band{background:#111827}.example-detail-hero{padding:.75rem 0 2.75rem}@media (min-width:1024px){.example-detail-hero{padding:1rem 0 3.25rem}}.example-detail-hero-grid{align-items:stretch;gap:2.5rem;display:grid}@media (min-width:1024px){.example-detail-hero-grid{grid-template-columns:minmax(0,46fr) minmax(0,54fr);column-gap:4rem;min-height:34rem}}.example-detail-breadcrumb{color:#828ba2;padding-top:.375rem;padding-bottom:1.625rem;font-size:.8125rem;line-height:1.25}.example-detail-breadcrumb ol{flex-wrap:wrap;align-items:center;gap:.375rem;display:flex}.example-detail-breadcrumb a{color:inherit;text-decoration:none;transition:color .2s}.example-detail-breadcrumb a:hover{color:#64748b}.example-detail-breadcrumb [aria-current=page]{color:#64748b;font-weight:500}.example-detail-hero-copy{flex-direction:column;max-width:34rem;min-height:100%;display:flex}@media (min-width:1024px){.example-detail-hero-copy{padding-bottom:4.5rem;position:relative}.example-detail-hero-copy-main{flex-direction:column;flex:1;justify-content:center;display:flex}.example-detail-hero-rating{flex-shrink:0;margin-top:0;position:absolute;bottom:0;left:0;right:0}}.example-detail-author{color:#64748b;align-items:center;gap:.5rem;margin-bottom:1.375rem;font-size:.875rem;line-height:1.25;display:flex}.example-detail-author-label{color:#828ba2}.example-detail-author-photo{object-fit:cover;border-radius:9999px;flex-shrink:0;width:2rem;height:2rem}.example-detail-author-name{color:#1e2532;font-weight:600}.example-detail-author-name:hover{color:var(--ex-link)}.dark .example-detail-author-name{color:#f1f5f9}.example-detail-title{color:#1e2532;font-family:var(--font-ui);letter-spacing:-.03em;margin:0 0 .875rem;font-size:clamp(1.875rem,2.6vw,2.5rem);font-weight:700;line-height:1.12}.dark .example-detail-title{color:#f8fafc}.example-detail-updated{color:#828ba2;margin:0;font-size:.875rem;line-height:1.4}.example-detail-hero-rating{justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:0;display:flex}.example-detail-hero-rating-left{align-items:center;gap:.875rem;display:flex}.example-detail-hero-preview{align-self:center;width:min(100%,28rem);margin:0 auto;position:relative}@media (min-width:1024px){.example-detail-hero-preview{align-self:start;width:min(100%,29.5rem);margin-left:auto;margin-right:-.25rem}}.example-detail-hero-card{background:#fff;border:1px solid #0f172a0d;border-radius:.25rem;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 8px 24px #0f172a12,0 20px 48px #0f172a17}.dark .example-detail-hero-card{background:#18181b;border-color:#ffffff14}.example-detail-hero-card-inner{background:#fff;width:100%;height:31rem;position:relative;overflow:hidden}@media (min-width:1024px){.example-detail-hero-card-inner{height:33.5rem}}.example-detail-hero-card-inner>div{background:#fff!important}.example-detail-hero-card-cta{background:var(--ex-accent);color:#fff;width:100%;min-height:3.25rem;font-family:var(--font-ui);justify-content:center;align-items:center;font-size:1rem;font-weight:600;line-height:1.25;text-decoration:none;transition:background-color .2s;display:flex}.example-detail-hero-card-cta:hover{background:var(--ex-accent-hover)}.example-detail-hero-card-cta:focus-visible{outline:2px solid var(--ex-accent);outline-offset:2px}.example-detail-rating-badge{color:#fff;background:#2d3b8e;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;width:2.875rem;height:2.875rem;font-size:.9375rem;font-weight:700;display:inline-flex}.example-detail-rating-copy{flex-direction:column;gap:.125rem;display:flex}.example-detail-rating-label{color:#1e2532;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem;font-weight:700}.dark .example-detail-rating-label{color:#e2e8f0}.example-detail-rating-sub{color:#828ba2;font-size:.8125rem;line-height:1.3}.example-detail-rating-stars{flex-shrink:0;align-items:center;gap:.125rem;display:flex}.example-detail-rating-star{color:#ff8c5a;fill:#ff8c5a;width:1.25rem;height:1.25rem}.example-detail-layout-grid{grid-template-columns:1fr;gap:2rem;padding:2rem 0 3rem;display:grid}@media (min-width:1024px){.example-detail-layout-grid{grid-template-columns:minmax(210px,240px) minmax(0,1fr) minmax(240px,280px);align-items:start;gap:2.5rem}}.example-detail-toc-aside{position:relative}@media (min-width:1024px){.example-detail-toc-aside{top:calc(var(--site-header-height,3.5rem) + 1.25rem);align-self:start;position:sticky}}.example-detail-toc-label{color:#1a2b49;margin-bottom:.875rem;font-size:1rem;font-weight:700}.example-detail-toc-list{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.example-detail-toc-link{color:#475569;font-size:.9375rem;font-weight:500;line-height:1.45;text-decoration:none;transition:color .2s;display:block}.example-detail-toc-link:hover,.example-detail-toc-link--active{color:var(--ex-link)}.example-detail-toc-sublist{border-left:1px solid #e2e8f0;flex-direction:column;gap:.5rem;margin:.625rem 0 0;padding:0 0 0 .875rem;list-style:none;display:flex}.example-detail-toc-sublink{color:#64748b;font-size:.875rem;line-height:1.45;text-decoration:none;display:block}.example-detail-toc-sublink:hover,.example-detail-toc-sublink--active{color:var(--ex-link)}.example-detail-main{min-width:0}.example-detail-main-title{color:#1a2b49;font-family:var(--font-ui);letter-spacing:-.02em;margin:0 0 1.5rem;font-size:1.75rem;font-weight:700;line-height:1.2}.example-detail-text-resume{border:1px dashed var(--ex-border);background:#f8fafc;border-radius:.5rem;margin-bottom:2rem;overflow:hidden}.example-detail-text-resume-header{background:#fff;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:1rem;padding:.875rem 1rem;display:flex}.example-detail-text-resume-label{color:#64748b;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.5rem;font-size:.6875rem;font-weight:700;display:inline-flex}.example-detail-copy-btn{border:1px solid var(--ex-accent);min-height:2rem;color:var(--ex-link);cursor:pointer;background:#fff;border-radius:.25rem;justify-content:center;align-items:center;padding:0 .875rem;font-size:.8125rem;font-weight:600;transition:background-color .2s,color .2s;display:inline-flex}.example-detail-copy-btn:hover{background:var(--ex-bg-softer)}.example-detail-text-resume-body{color:#1e293b;white-space:pre-wrap;padding:1.25rem 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8125rem;line-height:1.65}.example-detail-intro{color:#475569;font-family:var(--font-editorial);margin-bottom:2rem;font-size:1.0625rem;line-height:1.7}.example-detail-section-heading{color:#1a2b49;font-family:var(--font-ui);letter-spacing:-.02em;margin:2.5rem 0 1rem;font-size:1.5rem;font-weight:700;line-height:1.25}.example-detail-section-heading:first-of-type{margin-top:0}.example-detail-paragraph{color:#475569;font-family:var(--font-editorial);margin:0 0 1rem;font-size:1rem;line-height:1.7}.example-detail-highlight{color:#475569;font-family:var(--font-editorial);background:#fef9c3;margin:0 0 1rem;padding:.125rem .25rem;font-size:1rem;line-height:1.7;display:block}.example-detail-list{color:#475569;font-family:var(--font-editorial);margin:0 0 1.25rem;padding-left:1.25rem;font-size:1rem;line-height:1.7}.example-detail-list li+li{margin-top:.5rem}.example-detail-related{margin:2.5rem 0}.example-detail-related-heading{color:#1a2b49;margin:0 0 1.25rem;font-size:1.25rem;font-weight:700}.example-detail-related-grid{grid-template-columns:1fr;gap:1rem;display:grid}@media (min-width:640px){.example-detail-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.example-detail-related-card{background:#f1f5f9;border-radius:.75rem;grid-template-columns:5.5rem minmax(0,1fr);gap:.875rem;padding:.875rem;text-decoration:none;transition:background-color .2s;display:grid}.example-detail-related-card:hover{background:#e2e8f0}.example-detail-related-title{color:var(--ex-link);margin:0 0 .375rem;font-size:.9375rem;font-weight:700;line-height:1.3}.example-detail-related-text{color:#64748b;margin:0;font-size:.8125rem;line-height:1.55}.example-detail-faq-list{flex-direction:column;gap:1.25rem;display:flex}.example-detail-faq-item h3{color:#1a2b49;margin:0 0 .5rem;font-size:1.0625rem;font-weight:700;line-height:1.4}.example-detail-faq-item p{color:#475569;margin:0;font-size:1rem;line-height:1.7}.example-detail-sidebar{position:relative}@media (min-width:1024px){.example-detail-sidebar{top:calc(var(--site-header-height,3.5rem) + 1.25rem);align-self:start;position:sticky}}.example-detail-sidebar-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;overflow:hidden}.example-detail-sidebar-preview{background:#fff;padding:1rem}.example-detail-sidebar-preview .templates-preview-thumb{border-radius:.375rem}.example-detail-sidebar-body{text-align:center;padding:1.25rem}.example-detail-sidebar-heading{color:#1a2b49;margin:0 0 1rem;font-size:1.125rem;font-weight:700;line-height:1.35}.example-detail-sidebar-cta{background:var(--ex-accent);color:#fff;width:100%;min-height:3rem;box-shadow:0 2px 10px var(--ex-shadow);border-radius:.25rem;justify-content:center;align-items:center;font-size:1rem;font-weight:600;text-decoration:none;transition:background-color .2s;display:flex}.example-detail-sidebar-cta:hover{background:var(--ex-accent-hover)}.example-detail-sidebar-rating{color:#64748b;justify-content:center;align-items:center;gap:.375rem;margin-top:1rem;font-size:.8125rem;display:flex}.example-detail-use-template{border:1px solid var(--ex-accent);width:100%;min-height:2.75rem;color:var(--ex-link);background:#fff;border-radius:.25rem;justify-content:center;align-items:center;margin-top:1.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;transition:background-color .2s;display:flex}.example-detail-use-template:hover{background:var(--ex-bg-softer)}.example-detail-preview-section{background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;margin:2rem 0;overflow:hidden}.example-detail-preview-section-header{color:#64748b;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.875rem 1rem;font-size:.8125rem;font-weight:600}.example-detail-preview-section-body{padding:1rem}.example-detail-preview-section-body .templates-preview-thumb{border-radius:.375rem}