#effect-stage{height:500px;position:relative;display:grid;place-items:center;background:#101114;border-radius:12px;overflow:hidden;color:#ffffff}#effect-stage>p{padding:24px;color:#ffffff;text-align:center}#effect-stage input[type=range]{width:85%;position:absolute;bottom:10px;left:7.5%}#effect-stage canvas{display:block;width:100%;height:100%;touch-action:none}#sequence{max-height:280px;overflow:auto;margin-top:16px}.frame-row{display:flex;gap:8px;align-items:center;padding:8px;border-bottom:1px solid #dedee5}.frame-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frame-row button{padding:6px 10px}.frame-row img{width:40px;height:40px;object-fit:contain}#effect-files{display:block;width:100%;margin-top:12px;font-size:14px}aside h2{font-size:18px}.effect-root{width:100%;height:100%;min-height:300px;position:relative;display:grid;place-items:center;overflow:hidden;perspective:900px;background:#101114;touch-action:none}.effect-card{position:relative;width:75%;height:75%;transform-style:preserve-3d;will-change:transform}.effect-card img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.effect-glare{position:absolute;inset:0;background:linear-gradient(120deg,transparent,#76dfff88,#ed94ff88,#fff8,transparent);mix-blend-mode:screen;pointer-events:none}.spin-image{width:100%;height:90%;object-fit:contain;pointer-events:none}.effect-root:focus-visible{outline:3px solid #7132f5;outline-offset:-4px}.frame-label{position:absolute;top:12px;left:12px;color:white;background:#101114aa;padding:6px;font:14px sans-serif}@media(max-width:680px){#effect-stage{height:380px}}

.effect-root{font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.effect-root input[type=range]{accent-color:#7132f5}.frame-label{border-radius:8px}.effect-root:focus-visible{outline-color:#7132f5}