.tools-surface .tools-tool-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--tools-line)}.tools-surface .tools-tool-hero__inner{position:relative;z-index:1;margin-inline:auto;max-width:48rem;padding:clamp(2rem,5vw,3rem) clamp(1rem,2.5vw,2rem)}.tools-surface .tools-tool-hero__grid{display:grid;gap:clamp(1.25rem,3vw,1.75rem)}@media (min-width:640px){.tools-surface .tools-tool-hero__grid{grid-template-columns:auto minmax(0,1fr);align-items:start}}.tools-surface .tools-tool-hero__avatar{width:3.25rem;height:3.25rem;font-size:1.25rem;border-radius:.875rem}.tools-surface .tools-tool-hero__eyebrow{font-size:clamp(1.375rem,3.5vw,1.625rem);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--tools-fg)}.tools-surface .tools-tool-hero__title{margin-top:.25rem;font-size:clamp(1.75rem,4vw,2.25rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--tools-fg)}.tools-surface .tools-tool-hero__summary{margin-top:.625rem;max-width:42rem;font-size:1.0625rem;line-height:1.6;color:var(--tools-muted)}.tools-surface .tools-tool-hero__actions{margin-top:1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.tools-surface .tools-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:1.25rem;font-size:.875rem;line-height:1.4;color:var(--tools-muted)}.tools-surface .tools-breadcrumb__link{font-weight:500;color:var(--tools-muted);text-decoration:none;transition:color .2s cubic-bezier(.25,1,.5,1)}.tools-surface .tools-breadcrumb__link:focus-visible,.tools-surface .tools-breadcrumb__link:hover{color:var(--tools-accent);outline:none}.tools-surface .tools-breadcrumb__sep{color:color-mix(in oklch,var(--tools-muted) 50%,transparent);user-select:none}.tools-surface .tools-breadcrumb__current{color:var(--tools-fg);font-weight:500}.tools-surface .tools-cta{display:inline-flex;align-items:center;justify-content:center;padding:.5625rem 1.125rem;border-radius:.5rem;border:1px solid transparent;font-size:.875rem;font-weight:600;line-height:1.25;text-decoration:none;color:oklch(.99 .005 var(--tools-hue));background:var(--tools-accent);transition:background-color .2s cubic-bezier(.25,1,.5,1),border-color .2s cubic-bezier(.25,1,.5,1)}.tools-surface .tools-cta:focus-visible,.tools-surface .tools-cta:hover{background:oklch(.52 .16 var(--tools-hue));outline:none}.tools-surface .tools-cta--secondary{color:var(--tools-fg);background:var(--tools-surface);border-color:var(--tools-line);font-weight:500}.tools-surface .tools-cta--secondary:focus-visible,.tools-surface .tools-cta--secondary:hover{border-color:color-mix(in oklch,var(--tools-accent) 35%,var(--tools-line));background:color-mix(in oklch,var(--tools-accent) 6%,var(--tools-surface))}.tools-surface .tools-prose{max-width:42rem;font-size:1rem;line-height:1.65;color:var(--tools-fg)}.tools-surface .tools-prose>p+p{margin-top:1rem}.tools-surface .tools-list{display:flex;flex-direction:column;gap:.625rem;max-width:42rem;list-style:none;padding:0;margin:0}.tools-surface .tools-list__item{position:relative;padding-left:1.375rem;font-size:1rem;line-height:1.6;color:var(--tools-fg)}.tools-surface .tools-list__item:before{content:"";position:absolute;left:0;top:.55em;width:.4375rem;height:.4375rem;border-radius:50%;background:color-mix(in oklch,var(--tools-accent) 70%,var(--tools-line))}.tools-surface .tools-steps{display:flex;flex-direction:column;gap:.75rem;max-width:42rem;list-style:none;padding:0;margin:0;counter-reset:tools-step}.tools-surface .tools-steps__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;align-items:baseline;font-size:1rem;line-height:1.6;color:var(--tools-fg)}.tools-surface .tools-steps__item:before{counter-increment:tools-step;content:counter(tools-step);display:inline-flex;align-items:center;justify-content:center;width:1.625rem;height:1.625rem;border-radius:50%;font-size:.8125rem;font-weight:600;line-height:1;color:var(--tools-accent);background:color-mix(in oklch,var(--tools-accent) 12%,var(--tools-surface));border:1px solid color-mix(in oklch,var(--tools-accent) 25%,var(--tools-line))}.tools-surface .tools-faq-accordion{display:flex;flex-direction:column;border:1px solid var(--tools-line);border-radius:1rem;overflow:hidden;background:var(--tools-surface)}.tools-surface .tools-faq-accordion__item{border-top:1px solid var(--tools-line)}.tools-surface .tools-faq-accordion__item:first-child{border-top:none}.tools-surface .tools-faq-accordion__summary{display:flex;cursor:pointer;list-style:none;align-items:flex-start;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.5vw,1.25rem) clamp(1rem,2.5vw,1.35rem);font-size:1rem;font-weight:600;line-height:1.4;color:var(--tools-fg);transition:background-color .2s cubic-bezier(.25,1,.5,1)}.tools-surface .tools-faq-accordion__summary::-webkit-details-marker{display:none}.tools-surface .tools-faq-accordion__item[open] .tools-faq-accordion__summary,.tools-surface .tools-faq-accordion__summary:focus-visible,.tools-surface .tools-faq-accordion__summary:hover{background:color-mix(in oklch,var(--tools-accent) 4%,var(--tools-surface));outline:none}.tools-surface .tools-faq-accordion__chevron{flex-shrink:0;margin-top:.15em;width:1.125rem;height:1.125rem;color:var(--tools-muted);transition:transform .2s cubic-bezier(.25,1,.5,1)}.tools-surface .tools-faq-accordion__item[open] .tools-faq-accordion__chevron{transform:rotate(180deg)}.tools-surface .tools-faq-accordion__answer{padding:0 clamp(1rem,2.5vw,1.35rem) clamp(1rem,2.5vw,1.25rem);max-width:42rem;font-size:.9375rem;line-height:1.65;color:var(--tools-muted)}.tools-surface .tools-example-output__frame{margin-top:1.25rem;border:1px solid var(--tools-line);border-radius:.75rem;overflow:hidden;background:var(--tools-surface)}.tools-surface .tools-example-output__image-wrap{position:relative;aspect-ratio:16/9;width:100%;background:color-mix(in oklch,var(--tools-line) 30%,var(--tools-bg))}.tools-surface .tools-meta-links{display:flex;flex-direction:column;gap:.5rem;max-width:42rem;list-style:none;padding:0;margin:0}.tools-surface .tools-meta-links__item{font-size:1rem;line-height:1.5}.tools-surface .tools-meta-links__link{font-weight:500;color:var(--tools-fg);text-decoration:underline;text-underline-offset:2px;transition:color .2s cubic-bezier(.25,1,.5,1)}.tools-surface .tools-meta-links__link:focus-visible,.tools-surface .tools-meta-links__link:hover{color:var(--tools-accent);outline:none}.tools-surface .tools-description-footer__actions{display:flex;flex-wrap:wrap;gap:.75rem}@media (prefers-reduced-motion:reduce){.tools-surface .tools-breadcrumb__link,.tools-surface .tools-cta,.tools-surface .tools-faq-accordion__chevron,.tools-surface .tools-faq-accordion__summary,.tools-surface .tools-meta-links__link{transition:none}}