/* Source vectors keep their own proportions and share the page's neutral surface. */
#logo .logo-panel:first-child{background:#6214FF;color:#FFFFFF}
#logo .logo-panel img{object-fit:contain;height:auto;transform:rotate(0deg);transition:transform 600ms cubic-bezier(.45,0,.2,1)}
.chapter-logo img{transform:rotate(0deg);transition:transform 600ms cubic-bezier(.45,0,.2,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  #logo .logo-panel:hover img,.chapter-logo:hover img{transform:rotate(-3deg)}
}
.anatomy{padding:40px 32px 26px;background:transparent;border-block:1px solid #ded8d3}
.anatomy img{display:block;width:100%;max-width:760px;height:auto;margin:auto;object-fit:contain}
.anatomy figcaption{margin-top:24px}
.clearspace-grid{grid-template-columns:1.3fr 1fr 1fr;gap:20px}
.diagram{height:265px;padding:24px;background:transparent;border:1px solid #ded8d3}
.diagram img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.source-variants{background:transparent;border:1px solid #ded8d3}
.source-variants img{height:auto;object-fit:contain}
.misuse-grid{gap:28px 22px}
.misuse-grid figure>div{padding:0;background:transparent;border:1px solid #ded8d3;overflow:hidden}
.misuse-grid img{width:100%;height:auto;aspect-ratio:600/338;object-fit:contain}
@media(max-width:1150px){
 .clearspace-grid{grid-template-columns:1fr 1fr}
 .clearspace-grid article:first-child{grid-column:1/-1}
 .clearspace-grid article:first-child .diagram img{max-width:680px}
}
@media(max-width:700px){
 .anatomy{padding:28px 0 22px}
 .clearspace-grid{grid-template-columns:1fr}
 .clearspace-grid article:first-child{grid-column:auto}
 .diagram{height:260px;padding:22px}
 .misuse-grid{grid-template-columns:1fr;gap:26px}
}
@media(prefers-reduced-motion:reduce){#logo .logo-panel img,.chapter-logo img{transition:none;transform:none}}