.art-motion{position:relative;display:inline-block;max-width:100%;line-height:0;vertical-align:middle}
.art-motion canvas,canvas[data-art-frames]{image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;aspect-ratio:1}
.art-motion .art-motion-toggle{position:absolute;right:2px;bottom:2px;min-width:32px;min-height:32px;margin:0;padding:2px;border:1px solid #fff;background:#000;color:#fff;line-height:1;font:14px monospace;box-shadow:none}
.art-motion-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.art-animation-controls{border:1px solid var(--line,#555);padding:14px;margin:16px 0;max-width:100%;box-sizing:border-box}
.art-animation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.art-animation-heading h3{margin:0;font-size:1rem}
.art-frame-strip{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 9px;max-width:100%;scrollbar-width:thin}
.art-frame-strip button{display:flex;flex:0 0 54px;flex-direction:column;align-items:center;gap:3px;min-height:62px;padding:5px;border:1px solid #666;background:#090909;color:#aaa;font:11px monospace;line-height:1.25}
.art-frame-strip button[aria-pressed=true]{border:2px solid #fff;padding:4px;color:#fff;background:#222}
.art-frame-strip canvas{width:36px!important;height:36px!important;max-width:none!important;border:0!important;image-rendering:pixelated}
.art-animation-body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;margin-top:8px}
.art-animation-preview{display:grid;gap:5px;justify-items:center;min-width:0}
.art-animation-preview canvas{display:block;width:96px;height:96px;image-rendering:pixelated;border:1px solid #555}
.art-animation-controls button{min-height:44px;white-space:normal;overflow-wrap:anywhere}
.art-animation-controls .studio-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.art-animation-controls label{display:grid;gap:5px;font-size:.75rem;min-width:0}
.art-animation-controls select{max-width:100%;min-height:44px;background:#000;color:#fff;border:1px solid #777;padding:5px}
.art-animation-controls .room-note{margin:10px 0 0}
.art-card>.art-motion{display:block;width:100%}.art-card>.art-motion>canvas{display:block;width:100%;height:auto}
.art-price-options{border:1px solid #555;padding:8px 12px}.art-price-options>summary{min-height:28px;cursor:pointer;font-size:.8rem;display:list-item}.art-price-options[open]>summary{margin-bottom:10px}.art-price-options .room-note{margin-bottom:0}
.monthly-round-deadline{border-left:2px solid currentColor;padding-left:10px;overflow-wrap:anywhere}.monthly-winner>.art-motion{flex:0 0 96px;width:96px}.monthly-winner>.art-motion>canvas{width:96px;height:96px}.monthly-feature>.art-motion{flex:0 0 48px;width:48px}.monthly-feature>.art-motion>canvas{width:48px;height:48px}.monthly-feature .art-motion-toggle{min-width:24px;min-height:24px;font-size:11px}
@media(max-width:380px){.art-animation-controls{padding:10px}.art-animation-body{grid-template-columns:72px minmax(0,1fr);gap:10px}.art-animation-preview canvas{width:72px;height:72px}.art-animation-heading{align-items:start}.art-animation-heading small{white-space:nowrap}.art-motion .art-motion-toggle{min-width:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.art-motion,.art-motion *,.art-animation-controls *{animation:none!important;transition:none!important}}