body.animation-tool{--paper:#fbf4e8;--card:#fffdf8;--ink:#292621;--green:#155b50;--muted:#605b53;--line:#c7c0b5;margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Arial,sans-serif}
body.animation-tool *{box-sizing:border-box}body.animation-tool a{color:var(--green);text-underline-offset:3px}body.animation-tool [hidden],.animation-handoff [hidden]{display:none!important}
body.animation-tool button,body.animation-tool input,body.animation-tool select{font:inherit}body.animation-tool button,body.animation-tool .an-button,.animation-handoff button{border:1px solid #155b50;background:#155b50;color:white;border-radius:7px;min-height:44px;padding:10px 17px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:transform 140ms ease}
body.animation-tool button.secondary,.animation-handoff button.secondary{background:#fffdf8;color:#155b50}body.animation-tool button:disabled,.animation-handoff button:disabled{opacity:.5;cursor:default}body.animation-tool button:active:not(:disabled){transform:scale(.98)}body.animation-tool :focus-visible,.animation-handoff :focus-visible{outline:3px solid #ae6228;outline-offset:4px}
body.animation-tool select,body.animation-tool input:not([type=checkbox]):not([type=radio]){min-height:44px;width:100%;border:1px solid #827b70;border-radius:5px;background:white;color:var(--ink);padding:9px}body.animation-tool input[type=checkbox]{width:21px;height:21px;flex:none;accent-color:var(--green)}
body.animation-tool .an-wrap{max-width:1180px;margin:auto;padding:0 24px}body.animation-tool header{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}body.animation-tool .an-brand{font:24px Georgia,serif;text-decoration:none}
body.animation-tool .an-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;padding:52px 0}body.animation-tool h1{font:clamp(34px,3.8vw,50px)/1.08 Georgia,serif;margin:12px 0 20px;text-wrap:balance}body.animation-tool h2{font:30px/1.2 Georgia,serif;text-wrap:balance}body.animation-tool h3{font-size:19px}body.animation-tool .an-lead{font-size:19px}body.animation-tool .an-eyebrow{color:var(--green);font-size:13px;letter-spacing:1px;text-transform:uppercase}body.animation-tool figure{margin:0}body.animation-tool figure img{width:100%;height:auto;display:block;border-radius:8px}body.animation-tool figcaption,body.animation-tool .small{font-size:14px;color:var(--muted)}
body.animation-tool .an-section{padding:28px 0;border-top:1px solid var(--line);scroll-margin-top:16px}body.animation-tool .an-upload{background:var(--card);padding:22px;border:1px dashed #827b70;border-radius:9px}body.animation-tool .an-upload label{display:block;font-weight:600;margin-bottom:8px}body.animation-tool .an-upload input{max-width:550px}
body.animation-tool .an-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}body.animation-tool .an-card{min-width:0;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);background:var(--card);border-radius:9px;padding:16px}body.animation-tool .an-card[data-selected=true]{border:2px solid var(--green);padding:15px;background:#edf3eb}body.animation-tool .an-card h3{margin:0;overflow-wrap:anywhere}body.animation-tool .an-frame{height:275px;display:flex;align-items:center;justify-content:center;background:#e9e1d4;border-radius:5px}body.animation-tool .an-frame canvas{max-width:100%;max-height:100%;width:auto;height:auto}body.animation-tool .an-actions{display:flex;gap:9px;flex-wrap:wrap}body.animation-tool .an-actions button{flex:1}body.animation-tool .an-card p{margin:4px 0}body.animation-tool .an-flags label{display:flex;align-items:flex-start;gap:8px;padding:5px 0;min-height:44px}body.animation-tool summary{cursor:pointer;min-height:44px;padding:10px 0}body.animation-tool .an-detail{overflow:auto;max-width:100%}body.animation-tool .an-detail canvas{display:block;max-width:none}body.animation-tool .an-zooms{display:grid;grid-template-columns:1fr 1fr;gap:10px}body.animation-tool input[type=range]{padding:0!important;accent-color:var(--green)}
body.animation-tool .an-settings{display:grid;grid-template-columns:1fr 1fr;gap:18px}body.animation-tool .an-settings label,body.animation-tool .an-subject label{display:flex;flex-direction:column;gap:6px}body.animation-tool .an-subject{display:grid;grid-template-columns:1fr 1.5fr auto;gap:12px;margin:12px 0;align-items:end}body.animation-tool .an-subject button{background:var(--card);color:var(--green)}body.animation-tool .an-notice{background:#eaf0e6;border-left:3px solid var(--green);padding:15px 20px;margin:20px 0}body.animation-tool .an-error{color:#9e3429;overflow-wrap:anywhere}body.animation-tool .an-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}body.animation-tool .an-timeline p{padding:17px;border-top:2px solid var(--green);background:var(--card)}body.animation-tool .an-timeline strong{display:block;font:25px Georgia,serif;margin-bottom:8px}body.animation-tool .an-examples{display:grid;grid-template-columns:1fr 1fr;gap:28px}body.animation-tool .an-examples img{height:270px;object-fit:contain;background:#e9e1d4}body.animation-tool footer{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding:30px 0}body.animation-tool .skip-link{position:absolute;left:16px;top:-100px;background:white;padding:12px;z-index:10}body.animation-tool .skip-link:focus{top:10px}
.animation-handoff{max-width:1060px;margin:24px auto;padding:24px;background:#fbf4e8;border:1px solid #c7c0b5;border-radius:9px;color:#292621;font:16px/1.5 Arial,sans-serif}.animation-handoff img{max-width:100%;width:auto;height:180px;object-fit:contain;display:block;margin:12px 0}.animation-handoff button{font:inherit;margin:0 8px 8px 0}.animation-handoff p{overflow-wrap:anywhere}
@media(max-width:800px){body.animation-tool .an-hero{grid-template-columns:1fr;gap:25px;padding:32px 0}body.animation-tool .an-hero figure{max-width:540px}body.animation-tool .an-cards{grid-template-columns:1fr}body.animation-tool .an-frame{height:350px}body.animation-tool .an-card{max-width:100%}body.animation-tool .an-subject{grid-template-columns:1fr 1fr}body.animation-tool .an-subject button{grid-column:1/-1;justify-self:start}body.animation-tool .an-timeline{gap:8px}body.animation-tool .an-timeline p{padding:12px}}
body.animation-tool .an-subject>*,body.animation-tool .an-settings>*{min-width:0}body.animation-tool select{min-width:0;max-width:100%}
@media(max-width:500px){body.animation-tool .an-wrap{padding:0 18px}body.animation-tool header{padding:18px 0;font-size:14px}body.animation-tool .an-brand{font-size:22px}body.animation-tool .an-settings,body.animation-tool .an-examples,body.animation-tool .an-subject{grid-template-columns:minmax(0,1fr)}body.animation-tool .an-timeline{grid-template-columns:1fr;gap:0}body.animation-tool .an-timeline p{margin:4px 0}body.animation-tool .an-upload{padding:16px}body.animation-tool .an-frame{height:310px}.animation-handoff{margin:20px 12px;padding:18px}}
@media(prefers-reduced-motion:reduce){body.animation-tool *,body.animation-tool *:before,body.animation-tool *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}body.animation-tool button:active{transform:none!important}}