/* Shared visual refinements from the responsive and accessibility audit. */
:root{scrollbar-gutter:stable;--ease-out:cubic-bezier(.2,.7,.2,1)}
.hero-copy{animation:hero-arrive .55s var(--ease-out) both}
.showcase{animation:hero-arrive .65s .08s var(--ease-out) both}
.topic-cover{animation:cover-arrive .65s var(--ease-out) both}
@keyframes hero-arrive{from{transform:translateY(12px)}to{transform:translateY(0)}}
@keyframes cover-arrive{from{transform:translateY(12px) rotate(1deg)}to{transform:translateY(0) rotate(2deg)}}
.js-motion .reveal:not(.visible){opacity:1;transform:none}
[data-enter]{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:var(--enter-delay,0ms)}
.js-motion [data-enter]:not(.visible){opacity:0;transform:translateY(16px)}
[data-enter].visible{transition-delay:var(--enter-delay,0ms)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#video-container{aspect-ratio:auto;background:#13171b;border-radius:10px;overflow:hidden}
#video-container video{display:block;width:100%;max-height:65dvh;aspect-ratio:1;object-fit:contain}
.button{min-height:44px;transition:background .2s,transform .2s var(--ease-out),box-shadow .2s}
.button:active{transform:translateY(0) scale(.98)}
.button.primary{min-width:140px}
.filters button,.copy-prompt,.close-dialog{min-height:44px}
dialog{padding-top:14px}
.close-dialog{position:sticky;top:0;right:0;z-index:3;display:block;width:44px;height:44px;margin:0 -18px 8px auto;background:#202328;border-radius:8px}
.demo-control button{display:inline-grid;place-items:center;min-width:44px;min-height:44px;flex-shrink:0;border-radius:8px}
.demo-control button:hover{background:#ffffff0b}
.site-footer nav a{min-height:40px;align-items:center;padding-block:7px}
.site-footer nav{row-gap:7px}
.hero-note,.showcase-tag{color:#a2aab6}
.cover-caption,.photo-label,.video-caption{color:#aab2bd}
.specs-strip b{color:#9daec6}
.small-tag{color:#a4b2c5}
.card-body>span{color:#a9c2e6}
.topic-page .video-note,.topic-page .source-links,.topic-page .prompt-helper{color:#aab3bf}
.topic-table tbody td:nth-child(3){background:transparent}
.topic-table tbody tr:hover{background:#ffffff03}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}
.example-card:focus-visible{outline-offset:3px}
.skip{background:#f2f4f8;color:#191b1f;border-radius:6px}
.dialog-status{min-height:1.7em;color:#bfdbff!important;font-size:13px!important;margin-top:12px!important}
dialog[open]{animation:dialog-arrive .22s var(--ease-out) both}
@keyframes dialog-arrive{from{opacity:.75;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
dialog::backdrop{animation:backdrop-arrive .2s ease-out}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
.reuse-grid article{display:flex;flex-direction:column}
.reuse-grid .line-icon{display:none}
.reuse-grid .small-tag{margin-top:auto;padding-top:26px}
.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.related-card{grid-template-columns:160px minmax(0,1fr);min-width:0}
.related-card>div,.topic-hero-copy,.topic-prose,.deep-grid>div,.prompt-layout>div,.topic-faq>div{min-width:0}
.related-card h3{overflow-wrap:anywhere}
.topic-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.topic-steps article,.topic-steps article>div{min-width:0}
.topic-steps article>div{overflow-wrap:anywhere}
.topic-steps article>span{flex-shrink:0}
.topic-page h1,.topic-page h2{overflow-wrap:break-word}
@media(hover:hover) and (pointer:fine){
 .related-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0002}
 .related-card{transition:transform .25s var(--ease-out),background .2s,border-color .2s,box-shadow .25s}
 .format,.reuse-grid article,.topic-steps article{transition:border-color .25s,box-shadow .25s}
 .format:hover,.reuse-grid article:hover,.topic-steps article:hover{border-color:#6c7c94;box-shadow:0 8px 24px #0002}
}
@media(hover:none){.example-card:hover,.button:hover{transform:none}.example-card:hover .art{transform:none}}
@media(max-width:900px){.related-card{grid-template-columns:110px minmax(0,1fr)}}
@media(max-width:700px){
 .related-grid{grid-template-columns:minmax(0,1fr)}
 .topic-steps{grid-template-columns:minmax(0,1fr)}
 .related-card{grid-template-columns:clamp(88px,30vw,125px) minmax(0,1fr);gap:18px}
 .demo-control{flex-wrap:wrap;gap:8px;padding-block:6px}
 .demo-line{flex:1;max-width:70px;min-width:20px}
 .topic-hero h1{font-size:clamp(35px,10.5vw,44px)}
 .topic-toc a{min-height:36px;display:inline-flex;align-items:center}
 .site-footer nav a{min-height:44px}
 dialog{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
 .close-dialog{margin-right:-10px}
 .dialog-layout .art{max-width:250px}
 .comparison:focus-visible,.topic-table:focus-visible{outline-offset:2px}
}
@media(max-width:360px){
 .related-card{padding:12px;gap:14px}
 .related-card h3{font-size:18px}
 .related-card p{font-size:12px;padding-right:0}
 .showcase-tag{display:none}
 .principles,.steps,.checklist{grid-template-columns:1fr}
 .topic-toc{gap:6px 18px}
 .topic-table table{min-width:560px}
}
@media(prefers-reduced-motion:reduce){
 :root{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js-motion [data-enter]:not(.visible),[data-enter]{opacity:1;transform:none}
 .topic-cover{transform:none}
}
@media print{
 header,footer,video,.topic-toc,.filters,.button,.demo-control,dialog,#toast,.skip{display:none!important}
 body,.surface{background:white!important;color:#111!important}
 p,h1,h2,h3,em,th,td{color:#111!important}
 .reveal,[data-enter]{opacity:1!important;transform:none!important}
 .section{padding-block:25px}.container{width:100%}
}