/* Each source sprite occupies a 512 x 1024 tile. Keep that ratio. */
.actor {width:31%;height:auto;aspect-ratio:1/2;background-size:300% 100%}
.claude {top:12%}.dot {top:-20%}.muse {top:14%}
.compact .visual {max-width:500px;aspect-ratio:1.4}
.compact .actor {height:auto;aspect-ratio:1/2}
.compact .claude {top:-6%}.compact .dot {top:-31%}.compact .muse {top:-5%}
.compact .foot {display:block;margin:0;padding:0 0 10px;border:0}
.compact .steps,.compact .sample {display:none}
.compact .controls {display:flex;margin:0;gap:8px}
.compact .controls button {min-height:38px;padding:7px 14px;color:#53647b;font-size:11px}
.compact .rail-picker {margin:2px auto 0}
.compact .permission {top:18%;left:28%;width:46%;padding:12px}
.compact .permission-head {font-size:11px;line-height:1.25}
.compact .permission-foot {display:block;font-size:9px;line-height:1.3}
.compact .rules span {font-size:9px}
.compact .receipt {top:13%}
.compact .wallet-back {height:27%;border-radius:18px;top:55%}
.compact .wallet-front {height:23%;top:64%;border-radius:10px 10px 18px 18px}
.compact .label {bottom:1%}
.visual[data-rail=usdc] .payment-object {height:auto;aspect-ratio:1}
.payment-object {aspect-ratio:1536/969;height:auto}
.payment-object img {aspect-ratio:1536/969;height:auto;object-fit:contain}
.paused * {animation-play-state:paused!important}
.motion-off .actor {animation:none!important}
.motion-off .stage * {transition:none!important}
@media(max-width:420px){
 .compact .permission {left:25%;width:52%;top:15%;padding:9px}
 .compact .permission-head {font-size:10px}
 .compact .permission-foot {font-size:8px}
 .compact .rules span {font-size:8px}
 .compact .receipt {top:12%;right:2%;padding:8px}
 .compact .receipt strong {font-size:10px}
 .compact .receipt span {font-size:8px}
}
html,body{overflow-x:hidden}
.compact .claude{left:2%}.compact .muse{left:67%}.compact .dot{top:-22%;left:34%}