.feature-subnav{border-bottom:1px solid var(--line);background:var(--surface);font-size:.83rem}.feature-subnav .container{display:flex;gap:1.5rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem}.feature-subnav a{color:var(--muted);line-height:1.5}.feature-subnav a[aria-current=page]{color:var(--cobalt);font-weight:600}.fp-hero{padding-bottom:3rem}.fp-back{display:block;font-size:.9rem;margin-bottom:2rem}.fp-hero .kicker{display:block}.fp-hero .h1{max-width:23ch;margin-top:.8rem}.fp-hero .lead{max-width:49rem;margin-top:1.3rem}.fp-actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.8rem 0 1rem}.fp-media{padding-bottom:1rem}.fp-product-shot,.fp-example{margin:0;border:1px solid var(--line);border-radius:var(--r-canvas);overflow:hidden;box-shadow:var(--shadow-card);background:var(--surface)}.fp-shot-bar{display:flex;align-items:center;gap:1rem;padding:.9rem 1.3rem;background:var(--navy);color:var(--on-navy-muted);font-family:var(--font-mono);font-size:.75rem}.fp-dots{letter-spacing:.3em;color:var(--mint)}.fp-product-shot img{width:100%;height:auto}.fp-product-shot figcaption,.fp-example figcaption{font-size:.8rem;line-height:1.65;color:var(--muted);padding:1rem 1.3rem;border-top:1px solid var(--line)}.fp-intro{max-width:49rem}.fp-intro .lead{margin-top:1.1rem}.fp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:2.6rem}.fp-grid p,.fp-related p{color:var(--muted);line-height:1.7}.fp-workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding:0;margin:2.8rem 0 0;list-style:none}.fp-number{display:block;font-family:var(--font-mono);color:var(--cobalt);font-size:1rem;margin-bottom:1.2rem}.fp-workflow p{color:var(--muted);line-height:1.75}.fp-scope-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:2.6rem}.fp-scope{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:clamp(1.3rem,2.5vw,2.3rem)}.fp-scope.current{border-top:3px solid var(--mint)}.fp-scope.direction{border-top:3px solid #f59e0b}.fp-scope .chip{display:inline-flex;margin-bottom:1.2rem}.fp-scope ul{padding-left:1.1rem;list-style:disc;color:var(--ink-soft)}.fp-scope li{padding-left:.2rem;margin:.8rem 0;line-height:1.75}.fp-scope .meta{margin-top:1.6rem}.fp-faq{max-width:950px}.fp-faq details{padding:1.3rem 0;border-bottom:1px solid var(--line)}.fp-faq summary{font-weight:600;line-height:1.6;cursor:pointer}.fp-faq details p{color:var(--muted);line-height:1.8;margin:1rem 0 0;max-width:47rem}.fp-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:2.4rem}.fp-related .card{display:flex;flex-direction:column;min-width:0}.fp-related .card-link{margin-top:auto;padding-top:.8rem}.fp-final .h2{max-width:24ch}.fp-final .lead{color:var(--on-navy-muted);max-width:44rem;margin:1.3rem 0 1.8rem}.fp-final .meta{margin-top:1.3rem;color:var(--on-navy-muted)}.fp-example-head{padding:2rem 2rem 1rem}.fp-example-head p{color:var(--muted);max-width:47rem}.fp-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--cobalt-wash);border-top:1px solid var(--line)}.fp-example-grid>div{padding:2rem;border-right:1px solid var(--line);min-width:0}.fp-example-grid>div:last-child{border-right:0}.fp-step{display:block;color:var(--cobalt);font:500 .78rem var(--font-mono);margin-bottom:1.5rem}.fp-source{font-size:1.3rem;line-height:1.7}.fp-example dl>div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.65rem 0;font-size:.84rem}.fp-example dt{color:var(--muted)}.fp-example dd{margin:0;text-align:right;font-weight:500}.fp-example .fp-missing{color:var(--amber)}.fp-example-grid p{line-height:1.8}.feature-detail .h3,.feature-paths .h3{line-height:1.2}.feature-detail section{scroll-margin-top:6rem}@media(max-width:900px){.fp-related,.fp-workflow,.fp-example-grid{grid-template-columns:1fr}.fp-example-grid>div{border-right:0;border-bottom:1px solid var(--line)}.fp-workflow{gap:1.5rem}.fp-workflow li{padding-bottom:1rem;border-bottom:1px solid var(--line)}.fp-number{margin-bottom:.7rem}.feature-subnav .container{gap:.6rem 1.2rem}}@media(max-width:640px){.fp-grid,.fp-scope-grid{grid-template-columns:1fr}.fp-example-head,.fp-example-grid>div{padding:1.3rem}.fp-actions .btn{width:100%;justify-content:center}.fp-shot-bar{font-size:.64rem}.fp-related{gap:1rem}.fp-hero{padding-top:2.5rem}.fp-back{margin-bottom:1.4rem}}@media(prefers-reduced-motion:reduce){.feature-detail *{animation:none!important;transition:none!important}}
