/* Shared finishing details and a restrained motion language. */
:root{scrollbar-gutter:stable;--ease-out:cubic-bezier(.22,1,.36,1)}
.motion-ready .reveal{transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);transition-delay:var(--reveal-delay,0ms);transform:translateY(22px)}
.motion-ready .reveal.visible{opacity:1;transform:none}
.reveal:focus-within{opacity:1!important;transform:none!important}
.button{transition:background .22s,transform .22s var(--ease-out),box-shadow .22s}
.button:active{transform:translateY(0) scale(.98)}
.tool-hero-copy h1,.tool-hero-copy>p,.tool-actions,.tool-tags{animation:gentle-enter .7s var(--ease-out) both}
.tool-hero-copy h1{animation-delay:50ms}.tool-hero-copy>p{animation-delay:100ms}.tool-actions{animation-delay:150ms}.tool-tags{animation-delay:200ms}
.hero-media,.tool-hero-art{animation:media-enter .85s var(--ease-out) both}
.example-image img,.tool-related img{transition:transform .65s var(--ease-out)}
.example-card,.related-card,.prompt-card{transition:border-color .25s,box-shadow .25s,transform .3s var(--ease-out)}
.example-card.filter-enter{animation:gentle-enter .35s var(--ease-out) both}
.example-card.filter-enter:nth-child(3n+2){animation-delay:45ms}.example-card.filter-enter:nth-child(3n){animation-delay:90ms}
.site-footer nav a,.page-index a{position:relative;width:fit-content;min-height:32px;align-content:center}
.site-footer nav a::after,.page-index a::after{content:'';position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.site-footer nav a:focus-visible::after,.page-index a:focus-visible::after{transform:scaleX(1)}
.carousel-dots{gap:4px;align-items:center}.carousel-dots button,.carousel-dots button.active{position:relative;width:28px;height:32px;border-radius:4px;background:transparent}
.carousel-dots button::after{content:'';position:absolute;top:13px;left:11px;width:6px;height:6px;border-radius:4px;background:#737b88;transition:width .25s var(--ease-out),left .25s var(--ease-out),background .25s}
.carousel-dots button.active::after{left:3px;width:22px;background:var(--blue)}
.video-toggle,.dialog-close{width:44px;height:44px}.filter-tabs button{min-height:40px}
.copy-prompt{min-height:44px}.breadcrumbs a{padding:7px 0}.breadcrumbs{min-height:32px}
.faq-list summary{transition:color .2s;padding-right:34px;position:relative;line-height:1.5}.faq-list summary::after{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.faq-list details[open]>p{animation:answer-enter .25s var(--ease-out)}
@supports(interpolate-size:allow-keywords){.faq-list details{interpolate-size:allow-keywords}.faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .32s var(--ease-out),content-visibility .32s;transition-behavior:allow-discrete}.faq-list details[open]::details-content{block-size:auto}}
dialog[open]{animation:dialog-enter .23s var(--ease-out)}dialog[open]::backdrop{animation:backdrop-enter .23s ease}
.image-dialog,.tutorial-dialog{overscroll-behavior:contain}.dialog-caption{min-width:0}.dialog-caption h3{overflow-wrap:anywhere}
.sample-note,.demo-note,.media-credit,.service-note{color:#a4a9b2!important}.art-kicker{font-size:11px}.art-bottom{font-size:10px}.film-label{font-size:10px}
.tool-hero-art figcaption{font-size:11px}.hero-benefits{line-height:1.6}.site-footer nav a{display:flex;align-items:center}
@media(hover:hover) and (pointer:fine){.example-card:hover,.related-card:hover,.prompt-card:hover{border-color:#6f7a8c;box-shadow:0 14px 36px #0002}.example-card:hover .example-image img,.tool-related:hover>img{transform:scale(1.025)}.site-footer nav a:hover::after,.page-index a:hover::after{transform:scaleX(1)}.faq-list summary:hover{color:var(--blue)}}
@media(hover:none){.button:hover,.tool-related:hover,.carousel-card:hover{transform:none}.sample-card:hover .art-shapes{transform:none}}
@media(max-width:960px) and (min-width:701px){.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-grid>.sample-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.sample-grid>.sample-card:last-child .sample-copy{padding-top:0}.art-shapes{pointer-events:none}.process-film{grid-template-columns:minmax(0,1fr)}.film-copy{padding:32px}.tool-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.hero-actions .button,.tool-actions .button{font-size:13px}.filter-tabs button{font-size:12px}.site-footer nav a{font-size:13px;min-height:40px}.site-footer nav{row-gap:8px}.page-index{gap:6px 20px}.page-index a{font-size:12px;min-height:36px;display:flex;align-items:center}.tool-hero-art figcaption{font-size:10px}.sample-note,.service-note,.film-copy .media-credit{font-size:11px}.tool-steps p{font-size:14px}.comparison{overflow-x:auto;overscroll-behavior-x:contain}.comparison table{min-width:590px}.comparison th,.comparison td{font-size:13px;padding:16px}.hero-actions{flex-wrap:wrap}.hero-grid{background-size:auto,48px 48px,48px 48px}}
@keyframes gentle-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes media-enter{from{opacity:.35;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes answer-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none!important}.button:active{transform:none}}