.animation-page{margin:0;background:#f5f2ed;color:#243b35;font-family:Manrope,Arial,sans-serif;line-height:1.6}
.animation-shell{max-width:1000px;margin:auto;padding:32px 20px 80px}
.animation-shell>header{margin-bottom:32px}.animation-shell h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.15}
.animation-card{background:#fffdf9;border:1px solid #d9dfd9;border-radius:22px;padding:clamp(20px,4vw,36px);margin:24px 0;color:#243b35;overflow-wrap:anywhere}
.animation-card h2{margin-top:0;font-size:1.5rem;line-height:1.3}
.animation-form{display:grid;gap:16px;margin-top:24px}.animation-form label{display:grid;gap:8px;font-weight:600}
.animation-card input,.animation-form input{box-sizing:border-box;width:100%;padding:12px;border:1px solid #7c9288;border-radius:10px;background:white;color:#243b35;font:inherit}
.animation-card input[type=checkbox]{width:auto;justify-self:start}
.animation-card button,.animation-shell button{padding:13px 20px;background:#264c40;color:white;border:0;border-radius:100px;font:inherit;font-weight:600;cursor:pointer;margin:8px 8px 8px 0}
.animation-card button:disabled,.animation-shell button:disabled{opacity:.55;cursor:default}
.animation-card a,.animation-shell a{color:#265c49;text-underline-offset:3px}
.animation-card :focus-visible,.animation-shell :focus-visible{outline:3px solid #bb741f;outline-offset:4px}
.animation-preview{width:100%;height:260px;object-fit:contain;background:#eeeee8;border-radius:12px}
.animation-fine{font-size:.9rem}.animation-message{white-space:pre-line;font-weight:500}.animation-resume{display:block;margin:16px 0}
.animation-card [hidden],.animation-shell [hidden]{display:none!important}
.animation-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media(max-width:520px){.animation-card button{width:100%;margin-right:0}.animation-shell{padding:24px 14px 60px}}