.stitch-animation-host,.stitch-replay-host{position:relative}
.stitch-animation-canvas{position:absolute!important;pointer-events:none;margin:0!important;min-height:0!important;min-width:0!important;flex:none;max-width:none!important;max-height:none!important;contain:strict;z-index:1;border:0!important}
.stitch-animation-host{overflow:hidden}
.stitch-controls{position:absolute;right:.4rem;top:.4rem;z-index:2;display:flex;gap:4px}
.stitch-controls[hidden]{display:none}
.animation-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.5rem;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--text)}
.animation-icon .icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stitch-controls .icon{filter:drop-shadow(0 0 1px var(--surface)) drop-shadow(0 0 2px var(--surface))}
.animation-control-help{position:absolute;top:100%;right:0;display:none;z-index:4;width:max-content;max-width:12rem;padding:.35rem .5rem;border-radius:.4rem;background:var(--surface);color:var(--text);font-size:.8rem;pointer-events:none}
.animation-icon:focus .animation-control-help,.animation-icon:hover .animation-control-help{display:block}
.animation-icon:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.animation-choice{padding:.75rem 0;border-top:1px solid var(--border);font-size:.95rem}
.animation-choice label{display:flex;align-items:center;gap:.6rem;min-height:44px}
.animation-choice input{width:1.2rem;height:1.2rem}
.animation-choice p{font-size:.9rem;max-width:28rem}

@media (min-width:64.01rem) and (max-width:95rem) {
    .animation-navigation { grid-template-columns:190px minmax(0,1fr);gap:20px; }
    .animation-navigation .header-actions { grid-column:2;grid-row:1;justify-self:end; }
    .animation-navigation .primary-nav { grid-column:1/-1;grid-row:2;flex-wrap:wrap;padding-top:0; }
}

.swipe-card .stitch-controls{left:max(.75rem,env(safe-area-inset-left))!important;top:max(.75rem,env(safe-area-inset-top))!important;opacity:1}
.stitch-animation-canvas[hidden]{display:none!important}
.creator-animation{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);grid-template-rows:auto 1fr;gap:1rem;align-items:start}
.creator-animation-preview{grid-column:1;grid-row:1/3;min-width:0}
.creator-animation-frame{position:relative;overflow:hidden;display:grid;place-items:center;aspect-ratio:4/3;max-height:480px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.creator-animation-frame>canvas:not(.stitch-animation-canvas){display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;min-height:0;margin:0}
.creator-animation-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.creator-animation-controls{display:grid;gap:.75rem}
.creator-animation label,.animation-preset label{display:block}
.creator-animation select,.creator-animation input:not([type=checkbox]),.animation-preset select{display:block;width:100%;margin-top:.5rem;min-height:44px}
.creator-animation>p,.creator-animation-colors{grid-column:1/-1}
.creator-animation-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;max-height:32rem;overflow:auto;padding:.2rem}
.creator-color{min-width:0;border:1px solid var(--border);border-radius:14px;padding:1rem;background:var(--surface)}
.creator-color label{margin:.6rem 0}.creator-color output{float:right}
.creator-swatch{display:inline-block;vertical-align:middle;width:24px;height:24px;border:1px solid var(--text);border-radius:50%;margin-right:.5rem}
.published-animation{max-width:640px;padding:1rem;margin:1rem 0;border:1px solid var(--border);border-radius:16px}
.published-animation button{margin:.6rem .4rem 0 0}.animation-preset{padding:1rem 0}
@media(max-width:47.99rem){.creator-animation{grid-template-columns:1fr}.creator-animation-preview{grid-row:auto}.creator-animation-colors{grid-template-columns:1fr}.creator-animation-frame{max-height:360px}.creator-animation-actions button{flex:1 1 130px}}
.creator-animation-actions .icon,.stitch-controls .icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.creator-animation-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem}

.creator-animation-actions .animation-icon{flex:0 0 44px}

.for-you-tools .animation-control-help{left:0;right:auto;text-shadow:none}

.creator-history{display:flex;gap:.6rem;margin-bottom:.75rem}
.creator-animation-more{grid-column:1/-1;min-width:0}
.creator-animation-more>label{max-width:24rem}
.creator-animation-more>button{margin:.75rem 0;min-height:44px}